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本 书 是 一 本 从 零 开 始 学 习 的 微 信 小 程序 开发 入 门 书 , 无需 额外 的 基础 。 全 书 以 项 目 
进 、 案 例 丰 富 ， 详 细 介 绍 了 微 信 小 程序 的 入 门 基础 知识 与 使 用 技巧 。 

全 书 共 分 为 12 章 ， 主 要 内 容 包括 4 个 部 分 。 第 一 部 分 是 入 门 篇 ， 包 括 第 1 章 和 第 
介绍 了 小 程序 的 由 来 、 首 次 注册 和 创建 项 目 流程 ;第 二 部 分 是 基础 篇 ， 包 括 第 3 章 和 第 
介绍 了 小 程序 框架 和 组 件 ; 第 三 部 分 是 应 用 篇 ， 包 括 第 $ 一 11 章 的 内 容 ， 这 7 个 章节 分 
中 网 络 API、 媒 体 API、 文 件 API、 数 据 API、 位 置 API、 设 备 API 以 及 界面 API 的 用 
篇 ， 包 括 第 12 章 的 内 容 ， 这 一 章节 提供 一 个 综合 应 用 设计 示例 一 一 高 校 新 闻 小 程序 的 
用 了 全 书 所 学 知识 ， 让 读者 所 学 即 所 用 。 全 书包 含 完 整 例题 应 用 110 个 ， 均 在 微 信 Wt 
中 调试 通过 ， 并 提供 全 套 例题 源 代码 、 练 习题 和 视频 讲解 。 
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二 与 


本 书 封 面 贴 有 清华 大 学 出 版 社 防 伪 标 签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 《CIP) 数据 


微 信 小 程序 开发 截 基 础 入 门 /周文 洁 编著 . 一 北京 : 清华 大 学 出 版 社 ，2019 
(Web 前 器 开发 技术 丛书 ) 
ISBN 978-7-302-31803-7 


[. QD 微 … I. 也 周 … ”有 卫 . 也 移 动 终 闹 - 应 用 程序 - 程 订 设 计 I. (DTN929.53 


中 国 版 本 图 书馆 CIP 数据 核子 (2018) 第 269521 号 


责任 编辑 :干冰 飞 
封面 设计 : 刘 键 
责任 校对 : 时 玲 兰 
责任 印 制 : 李 红 英 


出 版 发 行 : 清华 大 学 出 版 社 
pad 址 :http:/Awww tup comcn http://Wwww.wabook.com 


= 


做 
局 
/| \ 
程 
序 
天 
发 
零 
基 
hr 
全 a 
| = 

= 


微 信 小 程序 (Mini Progr am) 是 一 种 轻 量 级 的 应 用 ， 它 实现 了 应 用 “人 多 
用 己 无 顷 下 载 、 安 痛 即 可 在 微 信 中 使 用 小 程序 。 微 信 小 程序 企 基 于 Web 前 : 
有 其 独特 的 语法 和 框架 ， 提 供 微 信 同 款 UI 和 功能 接口 ， 大 幅度 提高 了 开 : 
能 让 零 基 础 入 门 的 开 友 者 迅速 上 手 开 友 出 美观 且 流 畅 的 应 用 , 也 能 给 使 用 者 
本 书 是 一 本 从 雯 开始 学 习 的 微 信 小 程序 开发 入 门 书 ， 恋 者 无 需 额外 的 : 
驱动 为 宗旨 ， 循 序 渐进 、 案 例 丰 富 ， 详 细 介绍 了 微 信 小 程序 的 入 门 基础 知 ; 
全 书 共 4 部 分 12 章 ， 分 别 组 成 如 下 。 
第 一 部 分 是 入 1 门 视 ， 包 括 第 1 章 和 第 2 章 的 内 容 。 其 中 ， 第 1 章 是 微 
要 介绍 了 小 程序 的 诞生 、 特 点 和 主要 功能 ， 详 细 讲 解 了 如 何 注 册 开 发 者 账 - 
及 开发 工具 的 下 载 与 安装 ; 第 2 章 是 第 一 个 微 信 小 程序 ， 从 零 开 始 讲解 新 : 
和 调试 、 代 码 提交 等 操作 ， 并 基于 该 项 目 介 绍 了 小 程序 的 目录 结构 和 开发 者 
第 二 部 分 是 基础 扁 ， 包 括 第 3 章 和 第 4 章 的 内 容 。 其 中 ， 第 3 章 是 小 ; 
解 了 逻辑 层 、 视 图 层 和 基础 布局 模型 flex 的 用 法 ; 第 4 章 是 小 程序 组 件 ，: 
介绍 了 视图 容器 、 基 础 内 容 、 表 单 、 导 航 、 媒 体 、 地 图 和 画布 组 件 的 用 法 
第 三 部 分 是 应 用 篇 ,包括 第 5$ 一 11 章 的 内 容 。 这 7 章 分 别 讲解 了 微 信 小 和 
包括 网 络 API、 媒 体 API、 文 件 API、 数 据 缓 存 API、 位 置 API、 设 备 API 
第 四 部 分 是 提高 篇 ， 包 括 第 12 章 的 内 容 。 这 一 章 提 供 了 一 个 综合 设 1 
校 新 闻 小 程序 的 设计 与 实现 。 该 章 从 创建 程序 开始 详细 介绍 了 一 个 仿 网 易 ; 
项 目 开 上 友 过 程 ， 包 括 页 面 的 布局 样式 设计 、 逻 辑 的 处 理 ， 以 及 相关 API 的 
本 书 最 后 是 附录 。 本 书包 含 完 整 例题 应 用 110 个 , 均 在 微 信 Web 开发 : 
试 通过 ， 并 提供 了 全 套 例题 源 代码 、 练 习题 和 视频 讲解 。 
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微 信 小 程序 入 门 


本 章 是 全 书 的 绪论 部 分 , 主要 介绍 微 信 小 程序 概述 、 准 备 工 作 和 开发 工 
做 信 小 程序 古 一 种 轻 量 级 应 用 程序 ， 自 上 线 一 年 多 来 ， 已 有 超过 58 万 个 
I 作为 短信 把 以 最 大 期 望 的 项 目 ， 小 程序 具有 三 局 


。 了 解 小 程序 的 由 来 、 功 能 和 创建 流程 ; 
0 
e 掌握 开发 者 工具 的 下 载 、 安 状 与 登录 ; 

。 熟悉 其 他 辅助 工具 的 使 用 。 


1.1.1 小 程序 简介 


化 信 小 程序 也 被 简称 为 小 程序 ， 其 英文 名 称 是 Mini Program。 它 是 一 ; 
的 轻 量 级 应 用 程序 。 微 信 研 发 团队 在 其 官方 网 页 上 有 一 段 天 于 微 信 小 程序 忆 
一 种 新 的 开放 能 力 ， 开 发 者 可 以 快速 地 开发 一 个 小 程序 。 小 程序 可 以 在 微 
和 传播 ， 同 时 具有 出 色 的 使 用 体验 。” 

腾讯 公司 高 级 副 总 裁 、 微 信和 创始 人 张 小 龙 曾 在 朋友 圈 上 发 布 关于 小 程 | 
是 一 种 不 需要 下 载 、 安 装 即 可 使 用 的 应 用 ， 它 实现 了 应 用 “触手 可 及 ”的 : 


由” 微 信 小 程序 开发 零 基 础 入 门 、0 吕 
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图 1-1 微 信 小 程 奈 入 口 图 1-2 张 小 龙 的 微 信 朋友 


1.1.3 小 程 友 的 功能 


小 程序 页 

小 程序 不 是 必须 从 自 页 进入 ， 任 何 一 个 小 程序 页 面 的 当前 信息 部 可 以 
而 无 顷 从 头 局 动 再 单 击 进 入 。 例 如 分 事 已 经 租 调 好 结果 的 页 面 ， 好 友 打 开 : 
时 数据 ， 而 不 必 再 自己 进行 查询 。 

对 话 分 享 

小 程序 文 持 对 话 分 享 ， 在 币 信 中 可 以 直接 转发 分 享 小 程序 给 单个 好 友 : 

搜索 查找 

小 程序 可 以 在 微 信 的 “发 现 ” 页 面 中 的 小 程 夺 入 口 处 被 搜索 但 找到，| 
外 租 弃 墟 口 响 名 称 拓 志和 白 忆 二 本 的 小 得 订 


图 历史 列表 
用 户 使 用 过 的 小 程序 会 自动 进入 “最 近 使 用 ”历史 列表 ， 用 户 
也 可 以 手动 将 小 程序 添加 到 “我 的 小 程序 ”中 ， 以 方便 下 次 使 用 。 


1.1.4 小 程序 的 创建 流程 


小 程序 的 完整 创建 流程 分 为 4 个 步骤 ， 如 图 1-3 所 示 。 

对 这 4 个 步骤 说 明 如 下 。 

。 注册 : 开发 者 需要 首先 在 微 信 公众 平台 上 进行 小 程序 账号 
注册 。 

e 信息 完善 :开发 者 注册 完毕 后 需要 填写 小 程序 的 基本 信息 ， 
包括 程序 名 称 、 图 标 、 服 务 范围 等 内 容 。 

。 开发 : 完成 小 程序 开发 者 绑 定 与 开发 信息 配置 后 ， 可 以 下 载 
开发 工具 进行 小 程序 的 开发 与 调试 工作 。 

。 提交 审核 与 发 布 : 完成 小 程序 后 需要 进行 代码 的 上 传 ， 然 后 
由 管理 员 提 交代 码 等 待 微 信 团队 审核 , 审核 通过 后 即 可 正式 图 1 


本 节 主 要 介绍 如 何 进行 小 程序 账号 的 注册 与 信息 完善 等 开发 前 的 准备 - 


1.2.1 ”注册 开发 者 账 写 


开发 者 自 先 着 要 在 做 信人 公众 平 台 上 注册 一 个 小 程 夺 账 和 号， 这样 才能 进 : 
与 提交 工作 。 其 注册 步骤 如 下 : 

访问 微 信 公众 平台 官网 诈 页 (mp.weixin.qq.com)， 然 后 单 击 右上 角 的 
进入 账 写 类 型 选择 页 面 ， 如 图 1-4 所 示 。 


单 市 此 处 按 包 一 | 全 立 m 汪 8 上 | @@ 


进行 账 与 注册 


微 信 小 程序 开发 零 基 础 入 门 “ 蕊 jy7 


在 当前 页 面 上 选择 注册 的 账号 类 型 为 “小 程 厅 ”， 即 可 进入 小 程序 的] 
图 1-5 所 示 。 


请 选择 注册 的 帐号 类 型 


Ons CY ss 


具有 信息 发 布 与 传播 的 能 力 具有 用 户 管理 与 提供 业务 服 
适合 个 人 及 媒体 注册 适合 企业 及 组 织 注册 


选择 此 类 型 


@, we 


CA 企业 微 人 


原 企业 号 


具有 实现 企业 内 部 沟通 与 协同 
适合 企业 客户 注册 


具有 出 色 的 体验 ， 可 以 被 便捷 地 获取 与 传播 
适合 有 服务 内 容 的 企业 和 组 织 注册 


1-5 账号 类 型 选择 页 面 


小 程序 的 正式 注册 页 面包 含 3 个 填写 页 面 ， 即 账号 信息 、 邮 箱 激活 、， 

账号 信息 

在 账号 信息 填写 页 面 需要 填写 邮箱 、 密 码 、 确 认 密 码 、 验 证 码 以 及 义 ; 
如 图 1-6 所 示 。 


小 程序 注册 


代 ) 帐号 信息 名 ) 邮箱 激活 (3 信息 登记 


每 个 闻 精 仅 能 申请 一 个 小 程序 已 育 短信 小 得 


良 扯 iesttest@qq.com 
作为 到 果 帐 器 ,请 境 写 未 被 向 信 公 座 平台 注册 ， 未 被 徽 信和 开放 平台 注册 ,未 被 
个 人 微 信 号 纤 定 的 邮箱 
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注意 在 该 图 中 填写 的 邮箱 地 址 必须 符合 以 下 条 件 : 

(1) 未 用 于 注册 过 人 微 信 公 众 平台 。 

(2) 未 用 于 注册 过 微 信 开放 平台 

(3) 未 用 于 绑 定 过 个 人 微 信号 的 邮箱 。 

此 外 ， 需 要 注意 每 个 邮箱 地 址 只 能 申请 一 个 小 程序 。 如 果 开 发 者 当前 : 
的 邮箱 ， 建 议 先 申请 一 个 新 的 邮箱 ， 再 继续 小 程序 的 账号 注册 。 

全 部 圳 写 完 成 并 人 义 选 同意 协议 条 于 后 蛙 击 最 下 方 的 “注册 ” 抽 钮 提交 | 

邮箱 激活 

在 提交 注册 后 会 看 到 邮箱 激活 提醒 ， 此 时 页 面 效 末 如 图 1-7 所 示 。 

小 程序 注册 


J ER En PP Fi 
(DD 帐号 人 售 筷 (2 日 P 稍 油 本 好 情 息 兰 让 


BE 


车 古 公 次 平台 帐号 


感谢 注册 ! 确 计 邮 性 已 淮 送 至 你 的 注册 邮箱 : wx ?JR.com。 请 
填 六 邮箱 查看 邮件， 井 激活 翁 候 平台 帐号 。 


登录 郎 箱 


没有 | 收 开 | 邮 侍 ? 

1，、 请 榨 柚 衣 灯 地 址 是 天 正 磺 ,你 可 以 返回 重 晰 二 写 。 
2、 检 查 你 的 邮件 垃圾 条 

 ， 若 仍 未 收 至 确认， 请 尝试 重 新 淮 送 


图 1-7 邮箱 账号 激活 提 醚 
登录 对 应 的 注册 邮箱 合 看 激活 邮件 ， 如 图 1-8 所 示 。 


”请 激活 你 的 微 信 小 程序 ” 上 月 | 


夏 忻 上 :| weixinteam<weixinteam®B@gqgq.com > (由 weixinteam@tencenteom 代 点 ， 旧 助 ) 


上 件 做: 我 wri 了 CO > 


时 ” 间 : 2018 年 02 月 05 日 22:53 (星期 一 ) 


公众 平台 


微 信 小 程序 开发 零 基础 入 门 二 


本 | 信息 登 
rn 束 进 入 了 信息 登记 页 面 ， 如 图 1-9 所 示 。 


小 程序 注册 


有 帐 : 世 ) 邮箱 激活 他 ) 信息 登记 


1 向 
让 


tS 


用 户 信 息 登 记 


微 信 公 众 平 台 致力 于 打造 真实 ， 言 法， 有效 的 互联 网 平台 。 为 了 更 好 的 保障 性 广大 微 信用 户 的 言 法 权益 ， 请 你 认真 填写 以 下 登记 信息 ， 
为 表述 方便 ， 本 服务 中 ，“ 用 户 ” 也 称 为 “开发 者 ”或 "你 ”，。 


用 户 信息 登记 审核 通过 后 : 

1. 你 可 以 依法 享有 本 微 信 公众 帐号 所 产生 的 权利 和 收益 ， 

2. 你 尾 对 本 微 信 会 俱 帐 号 的 所 有 行为 承担 全 部 责任 ; 

3. 你 的 注册 信息 将 在 法 律 苑 许 的 范围 内 向 微 信 用 户 展 示 ; 

4 人 民法 院 、 榨 察 院 、 会 安 机 关 等 有 要 机 关 可 向 腾讯 依法 调职 你 的 注册 信息 等 。 


请 确认 你 的 微 信 公信 帐号 主体 类 型 局 于 政府 ， 媒 体 ，、 企 业 ， 基 他 组 织 ， 个 人 ， 并 请 按照 对 应 的 类 别 进 行 信息 登记 。 
点 击 查 看 微 信 公众 平台 信息 登记 指引 


注册 国家 /地 区 中 国 大 陆 ~ 


主体 类 型 如 何 选择 主体 类 型 ? 
个 人 企业 政府 媒体 其 他 组 织 
人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 
账号 能 力 : 个 人 央 型 暂 不 支持 做 信 认 证 、 微 信 支 付 及 高 级 接口 朋 力 


图 1-9 小 程序 信息 登记 页 面 


注册 国家 /地 区 保持 默认 内 容 “ 中 国 大 陆 ”， 然 后 根据 实际 情况 进行 : 
目前 小 程序 允许 注册 的 主体 类 型 共有 5 种 ， 即 个 人 、 企 业 、 政 府 、 媒 体 及 : 
表 1-1。 


表 1-1 小 程 夺 账 号 的 主体 类 型 介绍 


账号 主体 类 型 解释 
TA 必须 是 年 满 18 多 以 上 的 微 信 实名 用 户 ， 并 且 具 有 国内 吴 份 信息 
企业 企业 、 分 支 机 构 、 个 体 工 商户 或 企业 相关 品牌 


政府 国内 各 级 、 各 类 政府 机 构 /事业 单位 ， 以 及 具有 行政 职能 的 社会 组 织 
构 、 党 团 机 构 、 司 法 机 构 、 交 通 机 构 、 旅 游 机 构 、 工 商 税务 机 构 、 
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主体 类 型 


如 何 选择 主体 类 型 


了 
"A 企业 政府 媒体 其 他 组 织 
人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 。 
由 号 能 旋 : 个 人 类 型 暂 不 支持 微 信 认 证 、 微 信 支 付 及 高 级 接口 能 力 
主体 信息 登 i 
身份 证 姓名 
信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 果 名 字 包 合 分 隔 号“ “， 请 匆 
省 略 . 
身份 证 号 码 


请 输入 您 的 刁 份 证 号码 。 一 个 和 号 份 证 号 码 只 能 ; 主 册 5 个 小 程序 ， 


管理 员 手 机 号 码 
请 输入 您 的 手机 号 码 ， 一 个 手机 号 码 只 能 注册 5 个 小 程序 
得 和信 验证 码 


请 输入 手机 短信 收 到 的 6 位 验证 码 


无 法 接收 验证 码 ? 
管理 员 身 份 验证 。 ”请 先 填 写 管理 员 身 份 信息 
1-10 


小 程序 信 ， 息 登 记 页 向 


a 中 六 到 出 客 


下 午 11:14 语 了 了 灶 48% 畔 _ 沾 


Ci) 
| 
1065907729063620011 


短信 /彩信 
令 天 下 午 11:14 


Ti 微 信 小 程序 开发 零 基 础 入 门 已 


注意 ， 验 证 人 码 必须 在 10 分 钟 之 内 填写 ， 否 则 会 失效 而 需要 重新 获取 ， 


方 的 “ 官 理 员 冉 份 验证 ” 栏 中 会 目 动 出 现 一 个 二 维 翁 ， 如 图 1-12 所 示 。 


主体 类 型 如 何 选择 主体 类 型 ? 
个 人 企业 政府 媒体 其 他 组 织 


个 人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 。 
帐号 能 力 : 个 人 类 型 缘 不 过 持 微 信 兴 证 、 微 信 壕 付 及 高 级 接口 能 力 


主体 信息 登记 
身份 证 姓名 周 梧 . 昌 
信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 果 名 字 包 售 分 隔 号 “” ， 请 忽 
和 省略. 
身份 证 号 码 32B202198 11082 


输入 您 的 刁 份 证 号 码 。 一 个 喘 份 证 号 码 只 能 注册 5 个 小 程序 。 


管理 员 手 机 号 码 153 )21 
请 输入 您 的 手机 号 码 ， 一 个 手机 号 码 只 能 注册 5 个 小 程序 。 


短信 验证 码 681644 
请 输入 手机 短信 收 到 的 6 位 验证 奏 


定理 员 身 份 验证 


请 用 管理 员 本 人 微 信 扫 拉 二 维 码 。 本 验证 方式 不 
a. 扣除 任何 费用 。 注 册 后 ， 扫 码 的 微 信 号 将 成 为 该 
人 et 吕 r 帐号 的 管理 员 微 信 入 号 。 


下 午 11:17 sg 人 中 国 : 下 午 11:18 
短信 验证 《返回 关闭 徽 信 验证 


微 信 小 程序 注册 身份 确认 


姓名 局 : 
身份 证 号 。 3 人 20819@0 W24082 


十 将 作为 小 程序 的 管理 员 。 
4 王 门 ” 三 | 你 的 身份 已 ， 


广 呈 
确定 
腾讯 将 在 接收 到 人 民法 院 、 检 察 院 、 
关 等 调 取 要 求 时 ， 提 供 你 的 个 人 1 


图 1-13 ”手机 微 信 验证 身份 确认 页 面 图 1-14 手机 微 信 验证 


此 时 旋 做 信号 束 会 被 登记 为 党 理 员 短信 和 号， 并 且 PC 只 的 网 页 画 面 也 ， 
验证 成 功 ”， 如 图 1-15 所 示 。 


官 理 员 身 份 验 证 


国庆 二 下 站 


六 微 信 小 程序 开发 零 基 础 入 门 “并 


主体 信息 提交 后 不 可 修改 
主体 名 称 : 局 二 


主体 类 型 : 个 人 


该 主体 一 经 提交 ， 将 成 为 你 使 用 微 信 公 众 平台 各 项 服务 与 功能 的 唯一 法 
律 主 体 与 缔约 主体 ， 在 后 续 开通 其 他 业务 功能 时 不 得 变更 或 修改 。 腾讯 
将 在 法 律 允 许 的 范围 内 向 微 信用 户 展示 你 的 注册 信息 ， 你 需 对 填写 资料 
的 真实 性 、 合 法 性 、 准 确 性 和 有 效 性 承担 责任 ， 否 则 腾讯 有 权 拒 绝 或 终 
止 提供 服务 . 


确定 取 肖 


1-16 ”主体 信息 确认 提示 框 


信息 提交 成 功 。 


和 微 信 公公 平台 | 小 程序 
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当前 可 以 直接 单 击 “ 前 往 小 程序 ”按钮 进入 小 程序 管理 页 面 ， 此 时 账 
状态 ， 可 以 直接 进行 小 程序 的 后 续 管理 工作 ， 如 图 1-18 所 示 。 


小 程序 点 布 流 程 
1 小 程序 信息 ”补充 小 程序 的 基本 入 息 ， 旭 和 名称、 图 款 ， 措 述 等 
小 程序 开发 与 管理 
开 涩 工具 下 载 开 医者 工具 进行 代表 的 开发 和 上 传 : 莹 通 小 程序 开发 者 工具 、 小 游戏 开发 者 工具 


漆 加 开 当 者 汉 加 开 巡 音 ， 进 行 代码 上 竺 
配 疝 服 冯 器 在 开发 识 甸 而 面 吉 看 征 PiC 和 AppSecret , 配 周 服务 串 二 名 


稻 动 六 档 可 以 国 沪 六 门 齐 绍 ! 曾 甬 小 程序 】， 开 侣 朗科 ! 釉 通 小 程序 小 游 弄 1 设计 纲 范 和 运营 规范 
< 版 本 党 布 这 | 跳 后 汪 冯 划 述 ， 市 该 通 过 后 可 发 布 


1-18 小 程序 党 理 页 面 


现在 小 程序 的 账号 注册 就 全 部 完成 了 ， 之 后 用 户 可 以 访问 微 信 公众 平 
com) 手动 输入 账号 和 密码 登录 进入 小 程序 管理 页 面 。 


1.2.2 ”小 程序 的 信息 完善 


在 账号 注册 完成 后 还 需要 完善 小 程序 的 基本 信息 ， 如 表 1-2 所 示 。 


小 程序 名 称 


小 程序 头像 


小 程序 介绍 


小 程序 服务 头目 


表 1-2 小 程序 的 基本 信息 内 容 介绍 


| 


小 程序 名 称 需要 控制 在 4 一 30 个 字符 ， 并 且 不 得 与 平 
台 内 已 经 仔 在 的 其 他 账号 名 称 重 名 


图 片 格式 只 能 是 png、bmp、jpeg、jpg 和 gif 中 的 一 种 ， 
并 且 文 件 不 得 大 于 2MB; 注意 头像 图 片 不 允许 涉及 政 
治 敏 感 与 色情 内 容 ， 网 片 最 后 会 被 切割 为 圆 形 效果 


字数 必须 控制 在 4 一 120 个 字符 , 介绍 内 容 不 得 含有 国 
家 相关 法 律 /法 规 禁止 的 内 容 

服务 类 目 分 为 两 级 ,每 一 级 都 必须 填写 ,不 可 以 为 空 ， 
服务 类 目 不 得 少 于 1 个 ， 不 得 多 于 5 个 ;特殊 行业 需 
要 额外 提供 资质 证 明 


4 国 末 本 下 【= 和 


人 微 信 小 程序 开发 零 基础 入 门 、 区 中 


像 图 片 不 允许 涉及 政治 敏感 与 色情 内 容 。 另 外 ， 头 像 图 片 每 个 月 可 修改 51 


En 
小 程序 名 称 微 信 4/30 检测 
该 名 称 与 已 有 公众 号 名 称 重 复 ， 需 与 该 小 
程序 帐号 相同 主体 才 可 申请 ， 查 看 同名 帐 
号 。 如 果 你 认为 已 有 名 称 侵 犯 了 你 的 合法 
权益 ， 可 进行 侵权 投诉 。 


帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
等 于 2 个 字符 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 点 击 了 解 更 多 名 称 规则 


图 1-19 ”小 程序 名 称 检测 失败 提示 


小 程序 名 称 项 着 二 站 二 党 14/30 检测 
你 的 名 字 可 以 使 用 
帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
等 于 2 个 字符 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 点 击 了 解 更 多 名 称 规则 


图 1-20 ”小 程序 名 称 检 测 成 功 提示 


单 击 “ 选 择 图 片 ” 投 钮 ， 即 可 选择 图 片 进行 上 传 ， 如 图 1-21 所 示 。 


小 程序 头像 新 头像 不 允许 涉及 政治 航 感 与 色情 ; 
图 片 格式 必须 为 : png,bmp,jpeg,jpg,gif ; 不 可 大 于 2M ; 建议 使 用 png 格 式 臣 
保持 最 佳 效 果 ; 建议 图 片 尺寸 为 144px*144px 


选择 图 片 


头像 了 预 响 
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小 程序 介绍 了 这 是 一 段 小 程序 介绍 ， 请 读者 们 填写 目 
己 实 际 需要 的 内 容 ， 注意 字数 不 要 超标 
惑 可 以 了 。 


78/120 


请 确认 介绍 内 容 不 含 国家 相关 法 委 
法 规 禁止 内 容 ,介绍 字数 为 4~120 
个 字 


图 1-22 ”小 程序 介绍 


四 小 程序 服务 类 目 

小 程序 服务 类 目 指 的 是 小 程 订 主要 内 容 了 所 属 的 服务 汽 围 ， 特 殊 行 业 需 : 
明 。 男 外 ， seh i 

服务 类 目 分 为 两 级 ， 每 一 级 都 必须 填写 ， 不 可 以 为 空 ， 如 图 1-23 所 示 


请 根据 小 程序 目 身 的 功能 ， 正 确 选 择 服 务 类 目 。 


服务 类 目 教育 v 在线 教 育 v 


图 1-23 ”小 程序 服务 类 目的 两 级 选项 
如 未 有 多 个 服务 范围 需要 退 加 ， 可 以 单 击 右 侧 的 “十 ”过 进行 请 加 ，: 


请 根据 小 程序 自身 的 功能 ， 正 确 选择 服务 类 目 。 SS 
服务 类 目 请 选择 v Y 由 ) 


1-24 ”小 程序 服务 类 目的 追加 


ff ,rip_. Es s,s 1 ks Ti»-: Ei A vp wi 


和 微 信 小 程序 开发 入 基础 入 门 “ 蕊 F7 


注意 : 小 程序 的 服务 类 目 最 少 有 1 个 ， 最 多 只 能 有 5 个 


全 部 填写 完毕 后 就 可 以 单 击 最 下 方 的 “提交 ”按钮 提交 小 程序 的 基本 
看 到 如 图 1-26 所 示 的 界面 。 


小 程序 发 布 流程 
step 


小 程序 信息 。 补充 小 程序 的 基本 信息 , 如 名 称 、 图 标 、 接 述 等 


小 程序 开发 与 管理 

开发 工具 下 载 开 发 者 工具 进行 代码 的 开发 和 上 传 ; 普通 小 程序 开发 者 工具 、 小 游戏 开发 者 工具 
添加 开发 者 。” ”添加 开发 者 ， 进行 代码 上 传 

配置 服务 而 在 开发 设置 页 面 查看 AppID 和 Appsecret ,配置 服务 器 域 定 

帮助 立 档 可 以 阅读 入 门 介绍 ( 普通 小 程序 ) . NS 游戏 ) 、 设 计 规 范 和 运营 规范 


step 


版 本 发 布 先 提 父 代码 ， 然 后 提 允 审 术 ， 审 迟 通 过 司 可 发 布 


1-26 ”小 程序 信息 填写 完成 
此 时 单 击 “ 添 加 开发 者 ”按钮 就 可 以 进行 小 程序 的 成 员 管理 了 。 
1.2.3 “小 程序 的 成 员 管 理 


除了 管理 员外 ， 还 可 以 为 小 程序 追加 其 他 项 目 成 员 。 具 有 管理 员 身 份 | 
以 在 小 程序 管理 后 台 统 一 管理 项 目 成 员 ， 并 为 他 们 分 别 设置 对 应 的 权限 。 

成 员 类 型 说 明 

管理 员 可 以 为 小 程序 添加 开发 者 、 体 验 者 以 及 其 他 权限 的 项 目 成 员 。 

对 项 目 成 员 可 以 被 分 配 的 不 同 权 限 说 明 如 下 。 

。 开发 者 : 可 以 使 用 微 信 web 开发 者 工具 进行 小 程序 的 开发 ， 也 可 

序 在 手机 端的 效果 。 
。 体验 者 : 可 以 在 手机 端 使 用 体验 版 小 程序 。 
。 登录 : 无 须 管 理 员 确认 即 可 登录 小 程序 管理 后 台 。 
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图 成 员 变 更 说 明 
每 个 小 程序 的 管理 员 与 项 目 成 员 都 是 允许 变更 的 。 需 要 注意 的 是 ， 每 - 
成 员 最 多 可 以 参与 到 50 个 小 程序 中 。 


Oo1.3 小 程序 的 发 I 具 


在 完成 准备 工作 之 后 就 可 以 进行 小 程序 的 开发 了 ， 小 程序 具有 官方 
具 一 一 * 币 信 web 开 发 者 工具 ”《 简 称 “ 开 发 者 工具 


1.3.1 软件 的 下 载 与 安装 


开 友 者 登录 小 程序 官 理 页 面 后 台 ， 然 后 蛙 击 石上 和 角 六 单 栏 中 的 “开发 
小 程序 开 友 工具 的 下 载 页 面 ， 也 可 以 直接 通过 URL 地 址 访问 下 载 页 
“https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 。 

在 该 页 面 需 要 根据 目 己 的 计算 机 操作 系统 的 闫 型 选择 对 应 的 下 载 地 址 ， 
下 载 地 址 与 计算 机 操作 系统 的 对 应 关系 如 下 。 

e Windows 64: Windows 64 位 操作 系统 。 

e Windows 32: Windows 32 位 操作 系统 。 

e Mac: Mac 操作 系统 。 

说 明 : 本 书 下 载 的 是 Windows 64 版 本 ,读者 请 根据 实际 情况 选择 对 

这 里 以 Windows 64 版 本 为 例 , 下 载 完 成 后 用 户 会 获得 一 个 EXE 应 用 和 
所 示 。 


名 称 | 修改 日 期 类 型 


国 Wechat devtools 1.02.1801081_x64.exe 2 应 用 程序 


1-27 微 信 web 开发 者 工具 的 安 沪 文件 


该 图 中 的 “1.02.1801081” 为 软件 版 本 写 ，“ x64” 表示 Windows 64 4 
可 以 根据 文件 名 再 次 确认 是 否 下 载 了 正确 的 版 本 。 
确认 无 误 后 ， 双 击 该 文件 进行 开发 者 工具 的 安装 ， 安 装 过 程 如 图 1-28 


加 微 信 web 开 发 者 工具 1.02.1803210 安装 。- 品 回 微 信 web 开 发 者 工具 1.02.18 


微 信 小 程序 开发 零 基础 入 站 


徽 信 web 开 发 者 工具 1.02.1803210 安装 。- 品 加 微 信 web 开 发 者 工具 1.02.18 


选择 宏 装 位 置 正在 安装 
选择 “利信 Yeb 开 发 者 工具 1.02 1603210” 的 安装 文件 云 。 > | “ 微 信 wat 开 发 者 工具 1. 02. 1803210” 正在 安装 ， 请 i 


en 
| 由 聘 : 站 atten js 


| 由 陡 ; 并 ttenDeap. js 
性 职 : LattanDepth. ja 


抽 职 : ip. js 
目标 艾 件 澜 抽取 : oor. js 
和 - 抽取 :fow. js 
-Proaram Files lx) ATEECert | 二 wakb 和 于 友 半 | 同 \ 浏览 名 )- . . 抽 了 对 ， 刀 owRiEht js 
| 由 耳 ; forEuah, is 
所 玛 空 间 ，446 .1 摘 陵 ， farEaohRi eht. js 
可 用 空间 ;47. 1468 换取; forIn. js 
< 上 一 步 好 ;| 安装 代 ) 取消 总 ) oe 
(c) 选择 安装 位 置 (d) 正在 安装 
图 1-28 【〔 续 ) 
安装 完成 后 的 页 面 如 图 1-29 所 示 。 
品 微 信 web 开 发 者 工具 1.02.1803210 安装 ”一 9 


安 委 完 克 


感 记 你 合用 往 信 web 开 故 者 工 且 1.02.1803210 


[MY 运 行 往 信 web 开 发 痢 工 且 1.02. 1803210(R) 


¢ 上 一 步 (P) 取消 iC) 


图 1-29 微 信 web 开发 者 工具 的 安 禾 完成 表面 
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短信 开发 者 工具 


请 使 用 微 信 扫 接 一 维 码 登录 


图 1-30 ”二 维 码 扫 描 页 面 


a 中国 评定 党 “ 午 2:5 a 中国 电信 室 下 午 2:58 
< 返回 徽 信 登录 


| 
bE- 二 


发 起 群 聊 


正在 浏 次 村 w 呈 于 添加 朋友 


a 扫 一 扫 是 否 确认 登录 微 信 web 开 发 


收 付款 


y 图 六 3 
:~ 二 
| 六 四 届 瑚 可 天 澡 .. 取消 


加 = 国 : 司 
[二 本 二 网 理光 到... 


ms 


EY he 


本 微 信 小 程序 开发 零 基础 入 门 “并 yt 


微 信 开 友 者 工具 


忆 


微 信 开 妈 月 工 中 


扫 拍 成 功 


请 使 用 微 信 扫描 二 维 码 登 录 


切换 帐号 ， 


(a) 扫 码 成 功 的 提示 页 面 (b) 确认 登录 后 的 菜单 
图 1-32 页面 变化 


开发 者 账号 切换 

做 信 开 肥 者 工具 允许 在 同一 台 计 算 机 上 切换 不 同 的 开 友 着 。 如 采用 户 : 
换 账 号 ， 可 以 单 击 灯 千 外面 右 下 角 的 “切换 账号 ”选项 回 到 二 维 码 扫 插 由 1 
开 友 痢 微 信 账 号 重新 扫 人 码 登 录 ， 如 图 1-33 所 示 。 


微 信 开 有 者 工具 做 信 开 发 者 工 


I90108 


Oe 
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1.3.3 ”其 他 辅助 工具 


小 程序 官方 文档 

小 程序 官网 提供 了 技术 文档 供 开 友 者 学 习 ， 文 档 会 更 新 各 类 小 程序 接 
第 一 时 间 了 解 小 程序 有 哪些 更 新 的 读者 可 以 关注 。 

官方 文档 访问 地 址 : https://developers.weixin.gq.com/miniprogram/dev/。 

微 信 开放 社区 

在 做 信 开 放 社 区 中 有 一 个 开 友 者 专区 可 以 搜索 前 见 问 题 和 解 丛 ， 用 户 | 
时 提问 ， 与 其 他 开 肥 着 一 起 交流 学 习 。 

开 有 友 者 社区 访问 地 址 : https://developers.weixin.qq.com/。 

小 程序 开发 者 助手 

使 用 小 程序 开 肥 者 助手 可 以 方便 、 快 捷 地 预 贞 和 体验 线 上 版 本 、 体 验 | 
开 友 者 可 以 通过 扫 一 扫 图 1-34 所 示 的 开 友 者 助手 小 程序 码 使 用 相关 功能 。 

小 程序 运营 数据 

小 程序 数据 分 析 征 面 同 小 程序 开 友 着、 运 萌 者 的 数据 分 析 工 具 ， 皖 供 : 
时 访问 监控 、 目 定义 分 析 等 ， 带 助 小 程序 产品 途 代 优化 和 运 萌 。 其 主要 功 | 
计 的 标准 分 析 ， 以 及 酒 足 用 户 个 性 化 需求 的 目 定义 分 析 。 

开 友 者 在 小 程序 上 线 后 有 两 种 方式 可 以 方便 地 看 到 小 程序 的 运 襄 数据 

。 方法 一 : 登录 小 程序 管理 后 台 ， 单 击 “ 数 据 分 析 ”， 然 后 单 击 相 应 上 

天 的 数据 。 
e。 方法 二 : 使 用 小 程序 数据 助手 在 短信 中 方便 地 得 看 运营 数据 。 开 有 友 : 
图 1-35 所 示 的 数据 助手 小 程序 码 来 使 用 相关 功能 。 


,'©. 


和 
LA/ 


第 一 个 微 信 小 程序 


本 革 首 先 讲解 如 何 创 建 第 一 个 小 程序 ， 包 括 新 建 项 目 、 真 机 预览 和 调 1 
容 ; ssh nt 者 构 ， 最 后 介绍 微 信 开发 者 工具 的 布局 和 : 


e。 熟悉 小 程序 快速 启动 模板 的 创建 方法 ; 

e。 了 解 小 程序 的 目录 结构 和 文件 类 型 ; 

e 掌握 小 程序 主体 和 页 面 JSON 文件 的 属性 配置 ; 

e 掌握 开发 者 工具 的 模拟 器 、 编 辑 器 和 调试 器 的 使 用 。 


本 节 使 用 微 信 web 开发 者 工具 创建 第 一 个 微 信 小 程序 。 
2.1.1 新建 项 目 


双击 微 信 web 开发 者 工具 图 标 , 管理 员 或 开发 者 使 用 微 信和 扫描 二 维 码 | 
进入 亲 蛙 者 而 。 然 后 旱 击 羔 早 中 的 “小 程序 项 目 ” 选 项 ， 进 入 小 程序 项 目 和 
理 页 面 ， 如 图 2-1 所 示 。 


< 小 程序 项 目 管理 


微 信 开 妈 者 工 具 


O21801081 
了 人 于 品 FT [ 问 
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此 时 ， 开 发 者 依次 填写 项 目 目 录 、AppID 和 项 目 名 称 就 可 以 新 建 一 个 
写 的 注意 事项 如 下 。 

。 项 目 目录 : 项 目 文 件 存放 的 路 径 地 址 , 可 以 单 击 输 入 框 右 侧 的 第 头 ; 

中 选择 指定 的 目录 地 址 。 

。 AppID: 管理 员 在 微 信 公众 平台 上 注册 的 小 程序 ID。 

e 项 目 名 称 : 由 开发 者 自 定义 一 个 项 目 名 称 , 该 名 称 不 会 影响 小 程序 神 

小 程 订 的 AppID 可 以 登录 做 信人 公众 平 台 (https://mp.weixin.qq.com) : 
法 是 单 击 左 侧 的 “设置 ”选项 ， 在 “开发 设置 ”面板 中 答 看 “开发 者 ID”:; 
(小 程序 DD)， 如 图 2-2 所 示 。 


R88” 微 信 公众 平台 | 小 程序 文档 
站 2 

合 首页 设置 ae 

《</》 ”开发 管理 re run ) 第 三 方 授权 管理 。 ”接口 设置 开发 者 工具 


数据 分 析 开发 者 ID 


久 

ml 

固 模板 消息 re sn 3 
总 ”客服 消息 

2 
吧 ] 


运 维 中 心 Appsecrett 小 程序 宝 钥 ) 


服务 器 域名 
图 2-2 查看 小 程序 ID 


将 查看 到 的 小 程序 ID 复制 并 粘贴 到 图 2-1 (b) 所 示 的 AppID 输入 框 ! 
来 如 图 2-3 所 示 。 


€ 小 程序 项 目 管理 


微 信 小 程序 开发 零 基 础 入 门 “ 志 J 


AppID 必须 填 实际 的 小 程序 ID, 否则 部 分 功能 将 无 法 使 用 。 如 果 开发 
法 注册 申请 小 程序 ID， 可 以 选择 AppID 输入 框 下 方 的 体验 小 程序 ， 此 时 
具 中 进行 开发 ， 但 无 法 真 机 预览 

如 果 项 目 目录 选择 的 是 一 个 空白 文件 夹 ， 则 开发 者 工具 会 默认 勾 选 “ 
模板 ”， 该 选项 会 自动 生成 代码 形成 一 个 简单 的 小 程序 效果 供 初学 者 入 门 学 

填写 完毕 后 单 击 “ 确 定 ”按钮 完成 操作 ， 跳 转 到 开发 页 面 ， 如 图 2-4 / 


chapter02 - 微 信 开发 者 工具 v1.02.1803210 
项 目 交 性 篇 和 办 工具 界面 设置 ”被 信 和 开 必 者 工具 


SS EE i 小 程序 榴 式 : 普通 编译 "| ®@ i Es 


模拟 器 。 编辑 器 调试 器 编译 ”预览 运程 调试 。 切 后 音 
iPhene 6 ww 75% = WiFi 十 位 := 有 
bk DD pages 
章 硬 外 烛 而 if 门 引 二 16:33 了 IE kutils 
WeChai “se 5 app.js 


{} app.json 
Wxss 同上 DWNSS 


t} project.config.jsen 


落 取 头像 昵称 


I 号 Sources Network 汶 
Hello World [Re Console DUrce Jetwork 


图 2-4 ”小 程 友 项 目 开 发 页 面 
该 图 中 左边 就 是 手机 预览 效果 图 ， 可 见 目 前 能 够 显示 出 一 个 “获取 头 4 
个 “Hello World” 文 本 ， 这 与 手机 运行 的 效果 完全 相同 。 
用 户 可 以 直接 在 PC 端 用 鼠标 单 击 模拟 手指 在 手机 屏幕 上 触摸 的 效果 ， 


二 二 二 二 二 eChat 过 16:29 i00% | Wechat 二 16 
Wer 
WeChat sw (©) 


获取 头像 昵称 
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在 图 2-5 中 , 图 (a) 显示 的 古 使 用 也 标 单 击 来 模拟 手指 在 于 机 屏 和 右上 人 银 


为 日 击 之 后 弹出 的 做 信和 授权 信息 ， 只 有 蛙 击 “允许 ” 才 可 以 获得 数据 ; 图 ， 
采 ， 由 该 图 可 见 小 程序 项 目 己 经 成 功 地 获取 了 开 有 友 者 的 头像 和 昵称 信息 。 


2.1.2 ” 真 机 了 预 史 和 调试 


国 真 机 预览 
除了 可 以 在 PC 端 使 用 鼠标 模拟 手机 触 屏 的 单 击 效果 以 外 ， 还 可 以 直 1 


订 预 贞 。 单 击 “ 预 大” 投 钮 ， 即 可 目 动 生成 一 个 预 砚 专用 二 维 码 ， 如 图 2- 


dy chapter02 - 微 信 开 改 者 工具 v1.02.1803210 
项 目 区 件 篇 加 工具 界面 设置 柚 信 开发 者 工具 哎 EF 二 对 | We ei| 
Ee 小 程序 模式 普通 编译 * © x by 
远程 调 戌 ” 切 后 首 
~ | : ee 二 
(a 避 码 丙 览 
| kk DD pages 
本 “< 16:35 [FF 本 面 ， | & 0 vtils 周 小 见 要 于 今天 16:36 上 传 
Wechat 量 哪 各 (s) ] J5 appjs 
{} app.json 


wa 二 记 六- WN 


{} projact.config.json 


周 小 见 
= cn 
-fi 扫 | | 天 17:01 时 此 效 
| 一 ce 加 | 复制 二 瞧 三 | 
[a Console Sources Network 为 
| 加 | top | [Filter 小 程序 开发 助手 ? 
Hello World ] 


ine 
br type: "getuserinfo”, timestonp: 197259, target:; ft, currentTrorget; {1-}, 


2-6 ”小 程序 项 目 生 成 预 究 二 维 码 
此 时 用 手机 微 信 扫描 图 2-6 中 的 三 维 码 即 可 进行 真 机 测试 ， 如 图 2-7 尺 


a 中国 电信 党 下 午 上 :39 是 了 下 加 
WeChat | 


宁 微 信 小 程序 开发 和 零 基础 入 门 “站 J 


由 图 2-7 可 见效 果 基 本 与 PC 端的 预览 图 一 致 。 用 户 需 要 注意 ,预览 所 用 
有 效 ， 要 注意 它 的 过 期 时 间 ， 一 旦 过 期 ， 需 要 重新 单 击 “ 预 览 ”按钮 生成 新 | 

较真 机 调试 

真 机 预览 只 能 看 到 小 程序 页 面 效 果 ， 如 果 在 测试 过 程 中 需要 像 PC 端 
状态 数据 (例如 console 语句 笨 出 、 本 地 缓存 数 据 变化 、 网 络 抓 包 等 )， 则 时 

单 击 “远程 调试 ”按钮 ， 即 可 自动 生成 一 个 调试 专用 二 维 码 ， 如 图 2- 


iy chapter02 - 微 信 开发 者 工具 v1.02.1803210 
项 目 文件 编辑 工具 界面 设置 ” 微 信 开发 者 工具 1 . 单 击 “远程 调试 ” 
ED EC ED sm -| [saw -cler[a 
模拟 器。 编辑 器 调试 器 弓 译 预 第 远程 油 计 ft 
iPhone6 ~ 75% -WiFi ~ a ca 远程 调试 
kb [ pages 
量 量 要 要 量 a % ll br kk 加 utils 
WeChat tO JS appjs 
{} app.ison 


ws 司 PP.WXSS 


{ Prolecteonfg.json 


周 小 贝 2 . 微 信 扫 一 扫 


今天 17:06 时 失效 
等 待 设备 
[R | Console Sources Network 四 
QO | top v | | Filter Default levels ™ 


Helle Wiorld 
be {type: "getuserinfo", timestamp: 197259, targets 1.}, currentTarget: 


Es 


页 面 路 径 pages/inde..， 复 制 打 开 ”场景 值 页面 参数 
图 2-8 ”小 程序 项 目 生成 预 究 二 维 人 码 
此 时 用 手机 微 信 扫 摘 图 2-8 中 的 二 维 码 即 可 进行 真 机 远程 调试 ， 如 图 : 


二 gc Fl 
wl 中 国电 信和 气 下 午 4:44 二 了 此 1995 远程 调试 
WeChat 村 了 @®) Console Soeurces MMemory Pratier Wxm AppData Storage 
™ “pasge? Styles | Dataset 
= 已 壹 法 i Pp view class="containery,. ,</View ee 
@ 服务 器 正常 /PaBe 


持 确 认 : 0 


待 发 送 : 0 


发 送 : 7 了 KB (0) 
已 接收 : 4 KB (0) 
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手机 调试 界面 会 比 真 机 预览 多 出 一 个 浮 窗 ， 该 浮 窗 会 显示 与 PC 端的 : 
过 程 中 手机 端的 任何 操作 都 可 以 在 PC 端 调试 器 中 同步 进行 查看 。 
2.1.3 ”代码 的 提交 


上 传代 码 

预 响 只 能 由 开发 者 测试 小 程序 的 性 能 和 表现 ， 如 采 硕 望 更 多 人 使 用 小 ; 
但 的 上 传 。 注 意 ,， 只 有 上 传 后 的 代码 才 可 以 由 审理 员 进 一 步 选择 到 布 为 体 颈 

自 完 需要 将 代码 上 传 到 小 程序 的 后 台 官 理 病 。 蛙 击 开 友 首 工具 项 闹 的 
上 传代 人 码 ， 具 体操 作 如 图 2-10 所 示 。 


chapter05 - 微 信 开 发 者 工具 v1.02.1803210 


小 程序 模式 、 普通 编译 "|G|B XT He 


编译 。 预览”。 运程 调试 ” 切 后 台 。 清 缓存 
@ 


上 传 成 功 后 ， 需 要 联系 管理 员 在 小 程序 管理 
后 台 将 本 次 上 传 设置 为 体验 版 本 。 卫 2. 单 击 “确定 ” 


取消 


图 2-10 上 传代 码 示意 图 


蛙 击 “确定 ”按钮 之 后 ， 会 出 现 新 的 表单 要 求 开 及 痢 填写 目 定 义 的 版 
如 图 2-11 所 示 。 这 两 个 字段 是 为 了 方便 官 理 员 检 会 版 本 而 使 用 的 。 


版 本 是 。 V1.2.0 
仪 限 了 字母、 数字 


项 目 备注 该 备注 主要 是 给 管理 员 看 的 ， 用 户 不 会 看 到 


取 肖 


中 微 信 小 程序 开发 零 基础 入 门 、{ 品 


同一 个 小 程序 允许 同时 有 多 名 开发 者 提交 自己 的 最 新 开发 版 本 ， 管 理 
中 一 份 进一步 提交 为 体验 版 或 线 上 版 。 

提交 体验 

管理 员 可 以 将 开发 版 本 提交 为 体验 版 ， 体 验 版 目前 最 多 可 以 供 15 名 4 
“提交 审核 ”按钮 右边 的 向 下 第 头 按钮 ， 选 择 “ 选 为 体验 版 本 ”选项 ， 如 区 


开 点 版 本 
版 本 号 开发 者 局 ,， 
V1.2.0 提交 时 间 2018-08-25 16:10:00 


接 术 该 备注 主要 是 给 管理 员 看 的 ， 用 户 不 会 看 到 


图 2-13 ”小 程序 的 开发 版 本 
体验 版 无 顷 经 过 审核 ， 选 中 选项 即 可 完成 ， 已 经 转换 成 功 的 体验 版 如 | 


开发 版 本 


开发 者 Em 


提 变 时 间 2018-06-26 17:05:00 


接 术 局 到 在 2018/6/26 下 午 5:03:35 提交 上 传 


2-14 ”小 程序 的 体验 版 本 


单 击 体验 版 的 版 本 号 下 方 的 按钮 会 出 现 一 个 二 维 码 ， 具 有 体验 者 权限 | 
信 扫 一 扫 就 可 以 使 用 体验 版 了 。 体 验 版 也 可 以 继续 单 击 “提交 审核 ”按钮 
版 本 ， 但 是 需要 经 过 审核 。 

提交 审核 

管理 员 可 以 将 开发 版 或 体验 版 进一步 提交 审核 ， 通 过 审核 后 的 版 才 
上 版 。 该 版 本 没有 权限 限制 ， 所 有 微 信 用 户 都 可 以 使 用 。 正 式 发 布 的 线 
所 示 。 
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开发 测试 


审核 过 程 


图 2-16 ”小 程序 项 目 阶段 示意 图 


在 不 同 阶段 小 程序 的 版 本 主要 有 开发 版 本 、 体 验 版 本 、 审 核 中 版 本 和 | 

开发 版 本 

使 用 开发 者 工具 可 以 将 代码 上 传 到 开发 版 本 中 。 开 发 版 本 只 保留 每 位 : 
上 传代 码 ， 该 版 本 只 有 开发 者 权限 用 户 可 以 预览 、 测 试 。 开 发 版 本 可 以 删 | 
本 和 审核 中 版 本 的 代码 。 开 发 版 可 以 由 管理 员 继续 提交 为 体验 版 或 审核 中 | 

体验 版 本 

开发 版 可 以 由 管理 员 继续 提交 为 体验 版 ， 该 版 本 无 须 审核 且 只 有 体验 : 
用 ， 其 他 用 户 无 法 打开 。 该 版 本 主要 用 于 正式 上 线 前 的 测试 体验 。 

审核 中 版 本 

开发 版 全 部 完成 后 可 以 由 管理 员 正 式 提交 上 线 。 小 程序 正式 上 线 前 的 
核 中 版 本 ， 同 一 个 小 程序 的 所 有 开发 版 本 只 能 有 一 份 处 于 此 状态 。 该 版 本 1 
新 提交 审核 ， 在 等 待 审核 的 过 程 中 不 影响 现 有 正式 版 本 的 使 用 。 

线 上 版 本 

该 版 本 是 审核 通过 后 的 版 本 ， 所 有 微 信用 户 都 可 以 查看 和 使 用 。 如 果 : 
新 被 审核 通过 ， 该 版 本 将 被 覆盖 更 新 。 


pa 


3 让 微 信 小 程序 开发 零 基础 入 门 


project .contig json * 

1 

2 "description": "项 目 配置 文件 。"， 
3 "settine”: { 

4 "Urlcheck": true, 

5 "es6": true, 


Y SS pages 


Vv index 


6 "postcss": true, 
了 "minified™": true, 
8 


JS index.js "newFeature": true 
Sp 9 }3 
<> index.wxml 18 "compileType": "miniprogram", 
- 11 "libVversicon™”: "1.9.1", 
wxss INdex.wxss 12 "appid" : "wx 各 Bf2" , 
13 "projectname”: "MyDemo”, 
v [SS logs 14 "isGameTourist": false, 
pe ’ 15 "condition": 1{ 
J> logs.js 16 "search": { 
i 17 "current": -1, 
{} ei 18 “EE 
<> logs.wxml }, 
2 日 "Conversation": 1{ 
wss |0gS.WXSS 21 UR 
22 "sk | 
v [SS utils 23 }， 
24 "game": { 
JS util.js 25 “urentls =] 
: 26 "list":; [] 
JS app.js 27 }, 
中 28 "miniprogram": { 
{} app.json 29 "current": -1, 
PN 出 3 SEE 
wxss apDDp.WXSS 31 i 
32 } 
33 } 


图 2-17 项 目 配置 文件 project.config.json 的 位 置 2-18 项目 配置 文件 project.cor 


2.2.2 主体 文件 


小 程序 主体 文件 同样 直接 位 于 项 目 根 目 隶 下， 如 图 2-19 所 示 。 


v [SS pages 
v [SS index 
J5 index.js 
<> Index.WXxml 
wxss indeXx.WXSS 
vv [Slogs 
J5 logs.js 


Fh i 天 Im 
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由 图 2-19 可 见 主 体 文件 名 称 均 为 app， 根 据 后 缀 名 不 同 分 为 3 种 类 娃 

e app.json: 必需 文件 ， 用 于 摘 述 小 程序 的 公共 配置 。 

。 app.js: 必需 文件 ， 用 于 描述 小 程序 的 整体 远 辑 。 

e app.WXSS: 可 选 文 件 ， 小 程序 公共 样式 表 。 

appJjson 

app.json 文件 息 小 程序 的 全 局 配置 文件 ， 主 要 包 售 了 小 程序 所 有 上 页面 | 
位 样 式 等 。 当 前 该 文件 的 内 部 代码 如 图 2-20 所 示 。 


app.1SO * 
i 
"pages":[ 
"pages/index/index", 
“PaEes/ logs/ Logs 


"backegroundTextStyle":"]light", 
"navigationBarBackgroundColor": "#fff",， 
"navigationBarTitleText": "WeChat", 
"navieationBarTextstyle":"black" 


图 2-20 ”全 局 配置 文件 app.json 的 代码 


由 图 2-20 可 见 ， 本 侈 小 程 厅 项 目 主 要 包含 了 pages 和 window 两 个 属 ' 
pages 和 window 以 外 ，app.json 还 可 以 配置 tabBar、networkTimeout 及 de 
属性 的 具体 说 明 如 表 2-1 所 示 。 

表 2-1 全 局 配置 文件 app.json 的 属性 


属 性 | 类 型 描述 


: 必 填 属 性 ， 用 于 记录 小 程序 所 有 页 面 的 路 径 地址 。 
i 面 地 址 ， 第 一 个 将 默认 为 小 程序 的 初始 页 面 
i 可 选 必 性， 用 于 设置 页 面 的 窗口 表现 ， 例 如 导航 
文字 内 容 以 及 文字 颜色 等 
tabBar 可 选 属性 ， 用 于 设置 页 面 底部 tab 工具 条 的 表现 


networkTimeout 可 选 属 性 ， 用 于 设置 各 种 网 络 请 求 的 超时 时 间 


5 下 微 信 小 程序 开发 零 基础 入 门 


2) window 属性 


window 属性 对 应 的 值 是 对 象形 式 ， 


题 文字 内 容 以 及 文字 


属 性 
navigationBar 


BackeroundColor 
navigationBarTextStyle 


navigationBarTitle Text 


navigationStyle 


backeroundColor 
backeroundTextStyle 


backeroundColorTop 


backeroundColorBottom Cuca 


enablePullDownRefresh 


onReachBottomDistance 


其 中 包括 了 小 程序 页 面 项 端 导航 ; 
颜色 等 属性 ， 具 体 可 以 包含 的 对 象 属性 如 表 2-2 所 示 。 


表 2-2 app.json 文件 中 的 window 属性 值 


类 型 | 默认 值 _ 


接 


] 术 
#000000 | 导航 栏 育 本 颜 色 ， 默 认 信 表示 黑色 ， 


sm | 


Smg | 


String 


叶 航 栏 标 题 颜色 ， 默 认 值 表示 日 色 
White 或 black 
于 航 栏 标题 文字 内容， 默认 为 无 文 : 
导航 栏 样 式 ， 只 文 持 default 或 cust 
于 目 定 义 守 航 栏 内 容 ， 只 保留 右上 
本 6.6.0 以 上 支持 此 功能 
窗口 的 背景 颜色 ， 默 认 值 表示 日 色 
下 拉 加 载 的 杆 式 ， 访 属性 信 只 能 是 
顶部 窗口 的 背景 闫 色 ， 只 有 iOS 有 
以 上 支持 此 功能 
压 部 窗口 的 背景 闫 色 ， 只 有 iOS 和 有 
以 上 文 持 此 功能 

征 否 开局 下 拉 刷 新 功能 
页 和 面 上 拉 触 压 事 件 触 发 时 距 页 和 面 展 
过 (px) 


注意 : 标记 类 型 为 HexColor 的 属性 值 只 支持 十 六 进 制 颜色 表示 方式 
示 红 色 ， 也 可 简写 为 #H00， 并 且 大 小 写 不 限 。 


这 里 不 妨 对 app.json 进 


app.json 


1 


上 Wu lo 


{ 


"pages":| 


进行 简单 修改 ， 修 改 后 的 代码 如 图 2-21 所 示 。 


"pages/index/index", 
"pages/logs/logs”™ 


]， 


"window™:{ 


"backegroundTextstyle":"light", 


Vechat 地 2206 


测 上 下 


Hello World 


图 2-22 ”修改 app.json 文件 中 的 window 属性 后 的 预 究 图 


开 上 友 者 可 以 根据 实际 需要 重新 修改 定义 window 属性 中 的 各 种 样式 效 上 5 

3) tabBar 属性 

如 果 小 程序 是 一 个 多 tab 应 用 (客户 疾 罕 口 的 故 部 有 tab 柱 可 以 切 鬼 
tabBar 配置 项 指定 tab 栏 的 表现 ， 以 及 tab 切换 时 显示 的 对 应 幢 面 。 

tabBar 的 属性 值 如 表 2-3 所 示 。 


表 2-3 app.json 文件 中 的 tabBar 属性 值 


局 天 一 过 
color HexColor| 是 | | tab 上 的 文字 默认 颜色 
selectedColor HexColor| 是 | | tab 上 的 文学 选中 时 的 颜色 
backeroundColor HexColor| 是 | | tab 的 背景 色 
borderStyle tabBar 上 边框 的 颜色 ， 仅 支 提 
list Amay | 是 | | tab 的 列表 
position tabBar 的 位 置 ， 仪 支持 botton 


5 微 信 小 程序 开发 零 基础 入 门 


注意 : 当 position 属性 值 为 top 时 iconPath 和 selectedIconPath 属性 无 


图 2-23 有 助 于 读者 更 好 地 理解 tabBar 和 list 属性 值 的 作用 区 域 。 


| backgroundColor borderstyle 
iconPath 


全 食 


酋 页 地 selectedColor tabBars 


selected[conPath | | 


2-23 ”tabBar 属性 值 的 对 应 关系 


iconPath 和 selectedIconPath 属性 不 是 必 寺 内容， 例如 : 


i 

二 "tabBar™: 1 

cc 

了 { 

3 "pagePath": "pages/index/index"™, 

6. "nextwv TH 可? 

> 上 

8 . { 

9 . "pagePath": "pages/demo/demo", 

10. "text": "例题 " 

生平 汉 } 

下 之 | 

1 } 

14. } 
上 述 代 码 表 示 声 明了 带 有 两 个 页 面 的 tabBar 效果 ，tab 文字 内 容 分 别 ; 
4) networkTimeout 属性 
app.json 中 的 networkTimeout 属性 可 以 用 于 设置 各 类 网 络 请 求 的 超时 | 

表 2-5 所 示 。 


表 2-5 app.json 文件 中 的 networkTimeout 属性 值 


5) debug 属性 
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用 户 可 以 在 微 信 web 开发 者 工具 中 开启 debug 模式 。 在 开发 者 工具 的 : 
言 轧 以 info 的 形式 给 出 ， 主 要 包括 Page 的 注册 、 页 面 路 由 、 数 据 更 新 、- 
可 以 帮助 开发 者 快速 定位 一 些 和 常见 的 问题 。 


加 appjs 


app.js 文件 是 小 程序 的 全 局 逻辑 文件 ， 代 人 码 片 段 如 图 2-24 所 示 。 


1 
2 
3 
4 
5 
6 
了 
8 
9 


18 
11 
12 
13 
14 
15 
le 
17 
18 
19 
过 加 
21 
22 
23 
24 
过 了 
26 
21 
28 
29 
38 
31 
32 
33 
34 
35 
36 
37 
38 
39 


//app.js 
App({ 
onLaunch: function () { 


// 展示 本 地 存储 能 力 

var logs = WX.EetSstorageSsync( "logs') || [] 
logs.unshift(Date,now()) 
WXx.setSstorageSsync('logs', logs) 


// 登录 
Wx. login({ 
SUCCeSS: res => 1{ 
// 发 送 res .code 到 后 台 换 取 openId, sessionKey, unionId 
+ 
}) 
// 获取 用 户 信息 
wx. EetSetting({ 
success: res => 1{ 
if (res.authSettineg['scope.userInfo']) { 
// 已 经 授权 ， 可 以 直接 调用 getUuserInfo 获取 头像 昵称 ， 不 会 弹 框 
Wx . EetUserInfo({ 
sUCCess: res => 1 
// 可 以 将 res 发 送 给 后 台 解 码 出 unionId 


this.globalData.userInfo = res.userInfo 


// 由 于 getUserInfo 是 网 络 请求 ， 可 能 会 在 Page.onLoad 之 | 

/A 所 以 此 处 加 入 callback 以 防止 这 种 情况 发 生 

if (this.userInfoReadyCallback) 1 
this.userInfoReadyCallback(res) 


ElobalData: 1 


UserFInfeo: null 


图 2-24 app.js 文件 的 代码 片段 


s 相 微 信 小 程序 开发 委 基 础 入 门 可 g 


/**app,. wxss**/ 

.container { 
height: 100%, 
display: flex; 
flex-direction:; column ; 


align-items: Centenr; 
Justify-content: space-between ; 
padding: 2D0rpX 909; 

box-sizing: border-box 


2-25 app.WXss 文件 的 代码 


app-wxss 文件 用 于 规定 所 有 页 面 都 可 用 的 样式 效 末 ， 语 法 格式 见 3.2.2 
文件 是 可 选 文件 ， 如 果 没 有 全 局 样式 规定 ， 可 以 省 略 不 与 。 


2.2.3 页 面 文件 


小 程序 一 般 会 在 根 目录 下 创建 一 个 pages 文件 来 用 于 保存 所 有 负面 文 1 
己 独 立 的 二 级 目录 ， 如 图 2-26 所 示 。 


和 [3 index 
JS index.js 
<> index.wxml 


wxss INdex.wxss 


[3 logs 
JS logs.js 


{} logs.json 


<> logs.wxml 


wxss |DgS.WXSS 
v [SS utils 
JS util.js 
JS app.js 
{} appjson 
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。 js 文件 ， 可 选 页 面 ， 用 于 设置 当前 页 面 的 逻辑 代码 。 
e。 json 文件 : 可 选 页 面 ， 用 来 重新 设置 app.json 中 window 属性 规定 | 
选项 只 会 显示 在 当前 页 面 上 ， 不 会 影响 其 他 页 面 。 


注意 : 为 了 方便 开发 者 减少 配置 项 ， 建 议 直 接 在 空白 页 面 文件 夹 上 右 : 
Page， 这 样 可 以 一 次 性 创建 描述 页 面 的 这 4 种 文件 ， 且 它们 会 具有 相同 的 
json 文件 的 可 用 属性 如 表 2-6 所 示 。 
表 2-6 dk 文件 的 属性 


描 


导航 栏 衣 景 颜 色 ， 例 如 #O0 


属 性 


navigationBarBackeroundColor | HexColor 


类 型 
navigationBarTextStyle sme mie 导航 栏 标题 颜色 ， 仅 文 持 1 
navigationBarTitleText ee 导航 栏 标题 文字 内 容 
backeroundColor HexColor | #8 窗口 的 育 景色 
backeroundTextStyle sme | ee 下 拉 loading 的 样式 ， 仅 文 
enablePullDownRefresh 一 是 否 全 局 开局 下 拉 刷 新 
onReachBottomDlstance 负面 上 拉 触 底 事 件 触 发 时 i 
单位 为 px 
石 设 置 为 tue， 则 页 面 整 
disableScroll Boolean false 外 ， 该 项 只 在 页 面 配置 中 在 
中 设置 
例如 : 
{ 


"navigationBarBackgroundColor™: "™#ffffff", 
"navigationBarTextStyle": "black", 
"navigationBarTitleText”™.: "这 是 新 标题 " 

} 


Lu fa 请 


人 导航 栏 标题 颜色 为 黑色 ， 
新 为 “这 是 新 标题 ”。 


注意 :页 面 的 JSON 文件 只 能 设置 与 window 相关 的 配置 项 ,以 决定 本 
所 以 无 须 像 app.json 那样 专门 写 window 属性 ， 


于 微 信 小 程序 开发 零 基 础 入 门 站 


T 加 pages 
此 index 


J5 index.js 

<> index.wxml 

wxss index.WXSs 
. [SS logs 

J5 logs.js 

{} logs.json 

<> logs.wxml 


wxss IOgSs.Wxss 


v- [ES utils Te 
JS5_ utiljs 


J5 app.js 
{} app.json 
wxss app.WXss 


{} project.config.json 


2-27 utils 文件 夹 


开发 者 工具 主要 由 菜单 栏 、 工 具 栏 、 模 拟 器 、 编 辑 器 和 调试 器 5 个 部 : 
所 示 。 


chapteroz - 微 信 开 发 者 工 具 1,02,1803210 


yy 0 i , 工具 栏 小 程序 机 式 -| | | 看 到 -| 已 | 呈 用 La m :| 
恒 拟 加 。 坑 辑 距 调研 电 | 二 病 译 。 预 院 运程 漂 汪 切 后 上 。 请 姻 存 
iFhone6 ww 75% = Wi *| | Ee = | appwss XX | 
、 Ei 6 3 mr na 1 erapp,nessss 四 
* DD pages 旦 :Comtainer 压 
ee Oh 二 555 | DO util 3 | haight: 188%; 
What = 5 appla 起 display; Flaxs; 
ev 5 flex=-direction; olyunmn; 
sl 外 liEn-1tems: enter: 
™ pn 了 Us 和 下 NE 
Ch prolect contgjacn B paddinE: 266rpx 外 
a | De 有 En 区: borderebox, 
160 9 
Sy . 


编辑 乾 


Hallo World 


编辑 工具 界面 证 


右 缩 进 
格式 化 代码 
代码 上 移 一 行 
代码 下 移 一 行 
项 目 文件 编辑 工具 界面 设置 复制 并 向 上 粘贴 
新 建 项 目 Ctrl+Shift+N 复制 并 向 下 粘贴 
打开 最 近 项 目 b> 跳 转 到 文件 
新 建 代码 片段 新 建文 件 上 一 个 编辑 器 
导入 代码 片段 保存 下 一 个 编辑 器 
坦 看 所 有 项 目 保存 所 有 Ctrl+Sh 搜索 
全 局 搜索 
关闭 当前 项 目 Ctrl+Shift+W ] 关闭 文件 蔡 换 
《b)“ 文 件 ” 沫 单 (Cc)“ 编 


工具 ”界面 设置 ” 微 信 开 发 者 工具 


Ctrl+B 


编译 配置 
前 后 台 切 换 
二 一 界面 设置 微 信 开 发 者 工具 
预 点 Ctrl+Shift+P 1 工具 栏 
I 

上 传 Ctrl+Shift+U 1 ”模拟 器 
自 定义 分 析 | ”广角 
自动 化 测试 i 目 寻 树 

YY 调试 证 


(e) “界面 ” 菜单 


微 信 开发 者 工具 
切换 帐号 


En | 
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2.3.2 工具 栏 


左 侧 区 域 
工具 栏 的 左 侧 区 域 主要 包含 个 人 中 心 、 模 拟 器 、 编 辑 器 和 调试 器 ， 


is sii| lis 


模拟 器 ”编辑 器 。 调试 器 
图 2-30 ”工具 栏 的 左 侧 区 域 


具体 说 明 如 下 。 

。 个 人 中 心 : 账户 切换 和 消息 提醒 。 

。 模拟 器 : 单 击 切换 显示 /隐藏 模拟 器 面板 。 
。 编辑 器 : 单 击 切换 显示 /隐藏 编辑 器 面板 。 
。 调试 器 : 单 击 切换 显示 /隐藏 调试 器 面板 。 
中 间 区 域 


工具 栏 的 中 间 区 域 主要 包含 小 程序 模式 、 编 译 模 式 、 编 译 、 预 览 、 


清 缓存 ， 如 图 2-31 所 示 。 


小 程序 模式 普通 编译 = xx 


如 | 


入 bh 


UL 中 


2-31 工具 栏 的 中 间 区 域 


具体 说 明 如 下 。 

e 小 程序 模式 : 小 程序 模式 和 搜索 动态 页 模式 。 

。 编译 模式 : 普通 模式 、 自 定义 编译 模式 和 二 维 码 编译 模式 。 
。 编译 : 重新 编 详 小 程序 项 目 。 

。 预览 : 生成 二 维 码 进行 真 机 预览 。 

。 远程 调试 : 生成 二 维 码 进行 真 机 远程 调试 。 

e 切 后 全: 可 以 切换 场景 但 。 


Tr 的 加 bh 19g= 上 上 * 才 FR 并 + 


[ww 
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e。 腾讯 云 : 小 程 订 授权 的 腾讯 云 服务 。 
。 主 情 : 显示 项 目 设 置 、 域 名 信息 和 腾讯 云 状 态 。 


2.3.3 模拟 春 


模拟 器 面板 可 以 切换 虚拟 手机 型 号 、 显 示 比 例 以 及 模拟 网 络 连接 状态 : 


项 目 文件 编辑 工具 界面 设置 ， 微 信 开 发 者 工具 项 目 文件 编辑 工具 界面 设置 、 油 信 开 发 者 工具 项 目 艾 件 弓 辑 工具 


SY EB Ea ED : EN ES ED ce 


模拟 器 编辑 申 调试 器 模拟 路 。 编辑 晶 调试 路 
iPhone & *» 75 因 = WIFI i =“ WiFi iPhene 6 | 75 


iPhone 5 320xX568 | DPr2z 


面 二 面 生 和 LE 和 at 重重 本 本 针 户 记 中 过 


iPhone 6 375 x 667 | Dpr:z 
iPhene 6 Plus 414% 736 | Depr:3 
iPhone 3 

iPhone 7 Plus 414 x 736|Depr:3 
iPhone 其 375 x 812 |Dpr:3 
Nexus 5 2360 x640 | Dpr:3 
Mexus Sx 号 11 x 731 | Dpri2.25 
Nexus & 412 x 732|Dpr:3.5 
自 定 必 


Hella World Helle World 


(a) 手机 型 号 选择 (b) 显示 比例 选择 (c) 网 络 
图 2-33 ”模拟 器 的 相关 选项 


2.3.4 ”编辑 过 


编辑 化 主要 包 合 项 目 完 茎 目 


孙 结 构 区 和 代码 区 ， 如 图 2-34 所 示 。 


app.json 
1 To i I = > 
2 "pages": [ ee 团 代 娶 nl El 
EE index 3 "paEes/index/index", 
JS indexjs "pages/ logs/ logs" 
添 州 壮 袜 各 "window": 
ee i EE "backeroundTextstyle™: "lieht"™, 
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目录 结构 区 

在 目录 结构 区 中 可 以 音 击 左上 角 的 “+” 号 添加 新 文件 ， 文 件 类 型 人 
Component、JS、JSON、WXML、WXSS 和 WXS。 其 中 ，Page 有 帮助 开 ， 
所 需 的 全 套 文件 ， 即 在 同一 路 径 中 批量 生成 同名 的 WXML、WXSS、JS 及 


代码 区 
在 代码 区 中 允许 打开 多 个 页 面 切换 查看 ， 单 击 代码 右上 角 的 “x” 号 ; 
页 面 。 
在 页 面 上 编辑 代码 还 可 以 实现 目 动 提示 。 这 里 以 编写 一 个 <view> 标 多 
所 示 。 
1 <!--pages/test/test .wxml--> 
2 <vib 
3 3 video 
View Tag 必 
3 Cover-view 
3 movable-view 
3 picker-view 
= scroll-view 


至 
全 
局 
I 
吕 
Fil: 
D 
室 


图 2-35 ”代码 启动 提示 功能 
由 图 2-35 可 见 ， 只 需要 输入 前 面 几 个 字母 ， 就 可 以 出 现 相关 组 件 的 代 
所 方 同 键 选择 正确 的 内 容 ， 然 后 按 回 车 键 即 可 全 部 生成 。 
2.3.5 ”调试 硬 
调试 右 可 以 在 PC 疾 预 换 小 程序 或 在 手机 病 调 试 小 程序 时 使 用 ， 用 于 : 


行 时 的 后 台 输 出 、 网 络 状况 、 数 据 存 储 等 内 容 的 变化 。 调 试 丛 目前 主要 包 : 
以 用 其 顶部 的 tab 栏 进行 切换 ， 如 图 2-36 所 示 。 


Console Sources Network Security Storage AppData Wxml Senst 


top 了 | Filter Default le 


2-36 调试 器 的 tab 栏 
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当然 可 以 由 开发 者 目 行 在 JS 文件 中 使 用 console.log(" 目 定义 输出 内 容 
制 台 上 进行 文本 输出 ， 用 于 诊断 代码 的 执行 情况 和 数据 内 容 。 
例如 下 接 在 控制 侣 输入 console.log0 语 句 后 回 车 即 可 完成 输出 ， 效 果 功 


[KR Console Sources Network Security Audits Storage AppData Wxml 


| top ¥ | | Filter Default leve 
> console.1og(' 欢 迎 一 起 学 习 微 信 小 程序 ') 

欢迎 一 起 学 习 微 信 小 程序 

undefined 
> | 


图 2-38 ”Console 控制 台中 的 console.log() 语 句 


SoUrces 
Sources 面板 是 小 程序 的 资源 面板 ， 可 以 显示 本 地 和 云端 的 相关 资 沽 
所 示 。 
[wx Console Sources Network Security Audits Storage AppData Wxml 
Sources | Content scripts » : | [4 app.js * 
vO top ~ @ source Map detected. 
YO 127.0.0.1:58810 li define( app.Jjs ,， function(require, module 
下 appservice 2|//# sourceMappingURL=data:applLication/jso. 
习 本 
> MM pages 
芒 appservice 
app.js 


VO (no domain) 


extensionsbinding 


图 2-39 ”Sources 面板 


小 程序 在 代码 编写 完成 后 会 被 打包 成 一 个 完整 的 JavaScript 文件 运行 。 
Network 
Network 面板 在 小 程序 调用 网 络 API 时 用 于 记录 网 络 抓 包 数 据 ， 如 图 


[®® Cansele Soureas Netwark Security Audits is speData Wxrml Sersor Trace 


和 操 本 | 可 | Win se Group by frame Praservs Iog Disable cache offline Nothrottling ™ 
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[KR Console Sources Network Security Storage AppData Wxml Sensor 
人 Securlty overview 
Main origin 
ee The security of this page is unknown,. 
Secure origins 
者 https://api.shanbay.com 
2-41 Security 面板 
[Kw Console Sources Network Security Audits Storage AppData Wxml Se 
过 滤 
Key Value 
Username "admin”" 
password "123456" 


2-42 Storage 面板 


在 测试 过 程 中 ， 开 发 着 可 以 手动 修改 该 面板 中 的 数据 但 。 


S| AppData 


AppData 面板 可 以 实时 查看 小 程序 页 面 JS 文件 中 data 数据 的 变化 ， 娘 


[RK Console Sources Network Security 


test : hellol 


webviewId :2 


Audits 


pages/demo81/intro/intro {21 


storagqe AppData Wxml sen 


图 2-43 AppData 面板 


在 测 弃 过 程 中 ， 开 有 者 可 以 手动 修改 该 面板 中 的 数据 但 。 


Wxml 


Wxml 面板 是 小 程序 的 WXML 代码 预览 面板 ,在 运行 小 程序 后 打开 该 | 
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位 置 经 纬度 、 加 速度 计 坐 标 等 ， 如 图 2-45 所 示 。 


[RK Console Sources 


Ceclocation | |enable 


39.92 
116.46 
3 

65 

0 

65 


65 


Orientation 0 


-0.9563 


-0.29231 


回 Trace 


Security Audits Storage AppData Wxml Senst 


Latitude 
Longitude 

Speed 

Accuracy 
Altitude 

Vertical Accuracy 


Horizontal Accuracy 


总 
Y 
| 
之 有 
| 
也 
人 
mm 


图 2-45 ”Sensor 面板 


Trace 面板 是 小 程序 的 调试 人 奶 躁 面板 ， 目 前 暂时 只 文 持 Android 于 机 ， 


[e Console Scurces Netweork Security Storage AppData Wxml Sensor Trace 


请 选择 Andraid 设备 


小 程序 框 淋 


本 章 主 要 内 容 是 小 程序 框架 ， 包 括 逻 辑 层 、 视 图 层 和 flex 模型 。 逻 辑 
编写 而 成 的 ， 视 图 层 由 WXML 和 WXSS 配合 组 件 构 成 ，flex 布局 可 以 确 
同 屏幕 尺寸 及 设备 类 型 时 元 素 在 恰当 的 位 置 。 

本 章 学 习 目 标 
e 掌握 注册 程序 和 页 面相 关 遂 数 的 用 法 ; 
e 等 握 页 面 路 由 的 方式 和 模块 化 的 用 法 ; 
。 掌握 WXML 的 数据 绑 定 、 列 表 / 条 件 泻 染 、 模 板 、 事 件 和 引用 ; 
。 掌握 WXSS 的 尺寸 单位 、 使 用 方式 和 选择 器 的 用 法 ; 
e。 了 解 flex 布 局 的 基本 概念 ; 
。 等 握 flex 布局 中 的 容器 属性 和 项 目 属性 。 


小 程序 开发 框架 的 人 远 辑 层 义 称 为 App Service， 是 由 JavaScript 编写 ; 
写 的 所 有 代码 最 后 将 被 打包 成 一 份 JavaScript， 并 在 小 程序 启动 的 时 候 运 1 
逻辑 层 的 主要 作用 是 处 理 数据 后 发 送 给 视图 层 演 染 以 及 接收 视图 层 的 : 
为 了 更 方便 地 进行 项 目 开 及 ， 小 程序 在 JavaScript 的 基础 上 进行 了 一 上 
(1 ) 新 增 AppO0 和 Page0 方 法 ， 分 别 用 于 整个 应 用 程序 和 单独 页 面 的 守 
(2) 新 增 getAppO 和 getCurrentPagesO 方 法 ， 分 别 用 于 获取 整个 应 上 
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表 3-1 App() 方 法 的 OBJECT 参数 


属性 触发 时 机 


onLaunch() i 当 小 程序 初始 化 完成 时 触发 
ee 生命 周期 函数 一 监听 小 程 | 当 小 程序 启动 或 从 后 台 进 》 
序 的 显示 台 显 示 时 触发 
和 生命 周期 函数 一 -监听 小 程 | 当 小 程序 从 前 台 进 入 后 台 民 
序 的 隐藏 时 触发 
I 当 小 程序 发 送 脚 本 错误 或 ， 
onError() 错误 监听 函数 调用 失败 时 触发 
onPageNotFound() 页 面 不 存在 函数 Se ri 
mw 开发 者 可 以 添加 自 定义 名 
其 他 自 定义 参数 ”| Any 称 的 函数 或 数据 到 OBJECT 
参数 中 


注意 : App0 方 法 只 能 写 在 小 程序 根 目录 下 的 appjs 文件 中 ， 并 且 只 外 


用 户 可 以 使 用 微 信 web 开发 者 工具 在 空 日 app.js 文件 中 直接 输入 关键 
动 出 现 提示 列表 ， 如 图 3-1 所 示 。 


appjs e 
1 //app.js a 
2 app 
~ App functir 
WW App 


“© AppOptions 

* AppSshowOptions 

*o ShareAppMessageReturnObject 
DD getApp 


图 3-1 app.js 的 代码 提示 列表 


默认 选择 提示 列表 中 的 第 一 项 ， 直 接 按 回 车 键 就 可 以 自动 生成 带 有 生 1 
代码 结构 ， 如 图 3-2 所 示 。 


Es 上 A cr DTT) He sr 1 


app-js 


上 


DT 


{HY 第 


意 
//app.js 
App (1 
站 
* 当 小 程序 初始 化 完成 时 ， 会 触发 onLaunch ( 全 局 只 触发 一 次 ) 
Sy 
onLaunch: function () { 


}， 


下 

* 当 小 程序 启动 ， 或 从 后 人 台 进 入 前 台 显示 ， 会 触发 onShow 
ef 

onshow: function (options) { 


扯 


* 当 小 程序 从 前 台 进 入 后 台 ， 会 触发 onHide 
*] 


onHide: function () 1 

}, 

/六 

* 当 小 程序 发 生 脚 本 错误 ， 或 者 api 调用 失败 时 ， 会 触发 onError 并 带 上 名 


*/ 
onError: function (msg) { 


} 


3-2 ”app.js 目 动 生成 App() 代 码 


由 图 3-2 中 的 代码 可 见 ，onLaunchO、onShowO 和 onError0 方 法 在 触 点 
用 户 可 以 利用 这 些 参 数 进行 状态 的 判断 与 处 理 。 其 中 ，onLaunch0 与 onSh 


数 名 称 完 全 相同 ， 


于 上段 
path 
query 
scene 
shareTicket 


referrerInfo 


具体 如 表 3-2 所 示 。 
表 3-2 onLaunch() 和 onShow() 方 法 返回 的 参数 


说 了 明 


打开 小 程序 的 路 径 
打开 小 程序 的 query 
打开 小 程序 的 场景 值 
String 小 程序 被 转发 时 会 生成 一 个 shareTicket, 打 于 
面 可 以 获取 该 参数 


当场 景 为 从 另 一 个 小 程序 /公众 号 /App 打开 
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说 明 : 天 于 场景 值 的 更 多 介绍 ， 见 附录 。 
除了 图 数 外 ，App0 也 文 持 添 加 目 定 义 的 全 局 变量 ， 示 例 代 但 如 下 : 


1. Appli! 

2 dlobalData: I 

3 userInfo: null // 这 是 一 个 全 局 变量 
i } 

3 


这 里 ， 全 局 变量 的 名 称 、 取 信和 数量 都 可 以 由 开 友 者 目 定义 。 

onPageNotFound() 万 法 

当 需 要 打开 的 页 面 不 存在 时 ， 微 信和 客户 亲 会 有 一 个 原生 模板 页 面 提示 . 
望 跳 转 到 此 页 面 ， 想 目 行 处 理 ， 则 需 用 到 onPageNotFound0 方 法 。 

该 方法 从 基础 库 1.9.90 开始 支持 , 低 版 本 需要 做 闽 容 处 理 。 当 要 打开 
会 回调 这 个 方法 并 市 有 3 个 参数 ， 具 体 参 数 内 容 如 表 3-4 所 示 。 


表 3-4 onPageNotFound() 方 法 的 参数 
字段 说 _ 明 
path 不 存在 页 面 的 路 径 
query 打开 不 存在 页 面 的 query 
是 否 为 本 次 启动 的 首 个 页 面 〈 例 如 从 分 享 等 入 口 进来 ， 首 - 


1SEntryPage Boolean a 
J 的 分 享 页 面 ) 


onPageNotFoundO 方 法 的 示例 代码 如 下 : 


1. ApPtit 

后 onPageNotEound: function(res) I 

3. /1 小 程序 打开 的 页 面 不 存在 时 需要 执行 的 代码 

2 wxX. redirectTol(t{ 

pe url: 'pages/test/test' 

6. }) // 如 果 是 tabBar 页 面 ， 请 使 用 wx .switchTab 
Pe 1 

8. 1} 


上 述 代码 可 以 用 指定 的 页 面 代 蔡 原生 模板 页 面 。 需 要 注意 的 是 ， 如 果 
回调 中 又 重 定向 到 另 一 个 不 存在 的 页 面 ， 将 重 定向 到 微 信 自 带 的 原生 模板 
在 ， 并 且 不 再 触发 onPageNotFoundO 监 听 。 

QetApp() 万 法 


4 . } 

3 onLoad:function (options)})l 

6. console.log(this.globalData.userInfo) // 使 用 this 关键 字 
了 。 } 

8. 上) 


上 述 代码 就 在 onLoad0 方 法 中 直接 使 用 了 this 关键 字 获 得 全 局 变量 。 
3.1.2 ”注册 页 面 


小 程序 在 每 个 页 和 面 JS 文件 中 通过 使 用 Page(OBJECT) 方 法 进行 页 和 面 注 ; 
于 指定 小 程序 页 面 的 生命 周期 图 数 。PageO0 方 读 的 OBJECT 参数 如 表 3-3 月 


表 3-5 Page() 方 法 的 OBJECT 参数 


属 ”性 说 明 
data 页 面 的 初始 数据 
onLoad() 生 合 周期 函数 一 一 监听 页 面 的 加 载 
onReady() Function | 生 合 周期 函数 一 一 监听 页 面 初次 泻 染 完 
onShow0 生命 周期 函数 一 一 监听 页 面 的 显示 
onHide( 生命 周期 函数 一 一 监听 页 面 的 隐藏 
onUnloadO Function | 生命 周期 函数 一 一 监听 页 面 的 季 载 


onPullDownRefreshO | Function | 页 面相 关 事 件 处 理 函 数 一 一 监听 用 户 下 拉动 作 
onReachBottomO) Function | 页 面 上 拉 触 压 事 件 的 处 理 函 数 


onShareAppMessage!() 用 户 单 击 右 上 和 角 转 发 

onPageScrollO 页 面 深 动 触 发 事件 的 处 理 函 数 

onTabItemTapO 若 当前 是 tab 页 ， 单 击 tab 时 触发 

其 他 开发 者 可 以 添加 任意 函数 或 数据 到 OBJECT 参数 
用 this 可 以 访问 


注意 : Page0 方 法 只 能 写 在 小 程序 每 个 页 面 对 应 的 JS 文件 中 ， 并 且 和 去 
人 


在 微 信 web 开发 者 工具 中 新 建 页 面 时 会 目 动 生成 页 面 JS 文件 的 Page( 
页 面 为 例 ， 创 建 完成 后 testjs 的 代码 如 下 : 
1. // pages/testy/test.]js 


ge (i 
3. /BF* 
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}, 

/未 站 

* 生命 周期 函数 一 一 监听 页 和 面 的 显示 
本/ 

DIShow: function() 1 

上 

1 束 束 

* 生命 周期 函数 一 一 监听 页 和 面 的 隐藏 
可/ 

onHide: function() 1 

}, 

1 村 来 

* 生命 周期 函数 一 一 监听 页 面 的 季 载 
*/ 

onUnload: function()} 1({ 

}, 

/下 站 

* 页面 相关 事件 处 理 函 数 一 一 监听 用 户 下 拉动 作 
*/ 

onPullDownRefresh: function() 1 
}, 

/在 冰 

* 页 向 上 拉 触 抱 事 件 的 处 理 函 数 

*/ 

onReachBottom: functijon() 1 
}, 

1 来 素 

* 用 户 单 击 右 上 角 分 圣 

*/ 


onShareAppMessage: function() 1{ 


与 App0 方 法 的 函数 情况 类 似 ， 开 发 者 同样 可 以 根据 实际 情况 删除 P: 
数 ， 或 者 保留 该 函数 内 部 为 空白 。 
除了 函数 外 ，Page0 同 样 也 支持 添加 自 定义 的 页 面 变量 ， 示 例 代 码 如 
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例如 在 data 中 放置 两 个 目 定 义 数 据 ， 页 面 JS 文件 的 示例 代码 如 下 : 


-上 二) 


Page (tt 
data:1 


msesqgq0l= “Hel lo.™., 
msqgq02: 2018 


对 应 WXML 的 示例 代码 如 下 : 


<view>{ {msg01}} {{msg02}}</view> 


此 时 famnsg01}} 和 {fmsg02}} 不 会 显示 字面 内 容 ， 而 是 会 租 找 data 中 的 
示 出 “Hello 2018” 字 样 。 

团 生命 周期 回调 函数 

Page0 站 函数 中 默认 生成 的 onLoad0、onShow0O、onReadyO0、onHideO 以 
于 页 面 的 生命 周期 回调 函数 ， 具 体 说 明 如 下 。 


onLoad(): 榜 式 为 onLoad(Object query)， 只 在 贝 面 加 载 时 触 太一 

的 参数 中 获取 打开 当前 页 面 路 径 附 市 的 参数 。 

onShow0: 当 页 面 妓 示 或 从 小 程序 后 台 切 入 前 台 时 和 触 肥 。 

onReady0O: 当 页 面 初 次 演 染 完成 时 触 友 。 注 章 ， 一 个 页 面 只 会 调 | 
己 经 准备 妥当 ， 可 以 和 视图 层 进行 交互 。 

onHide0O: 当 切入 后 从 时 触 友 。 例 如 navigateTo 或 捅 部 tab 
小 程序 切入 后 台 

onUnload(): 当 页 面 印 载 时 触发 。 例 如 redirectTo 或 navigateBack 于 


四 页 面 事件 处 理 函 数 
Page0 方 法 中 默认 生成 的 onPullDownRefreshO、onReachBottom(O)、ons 
以 及 未 目 动 生成 的 onPageScroll0、onTabItemTapO 均 属于 页 面 事件 处 理 国 阁 


onPullDownRefreshO0: 监听 用 尸 下 拉 刷 新 事件 ， 需 要 在 app.Jjson 的 
页 面 配 置 中 开局 enablePullDownRefresh。 

onReachBottom(): 监听 用 户 上 拉 触 底 事 件 ， 可 以 在 appjson 的 win 
配置 中 设置 触发 距离 onReachBottomDistance。 在 触发 距离 内 滑动 ] 
被 触 友 一 座 

onPageScroll(OBJECT): 监 号 昕 用 省 滑 动员 页 面 事 件 。 其 参数 OBJE( 


1 Br | 


了 微 信 小 程序 开发 零 基础 入 门 


此 事件 需要 返回 一 个 Object 对 象 ， 用 于 目 定义 转 友 内 容 ， 返 回 内 容 如 


表 3-7 onShareAppMessage() 方 法 的 返回 的 Object 对 象 


字 段 说 。 明 
title 转发 标题 ， 默 认为 当前 小 程序 名 称 
path 转发 路 径 ， 默 认为 当前 页 面 path， 必 须 是 以 根 目录 /开头 的 完整 路 4 


目 定义 图 请 路 径 ， 可 以 是 本 地 文件 路 径 、 代 码 包 文件 路 径 或 者 网 乡 
PNG 及 JPG 文件 ， 旺 示 图 片 的 长 宽 比 是 5 : 4。 为 外 使 用 默认 截 医 


1mageUrl 


onShareAppMessage(OBJECT) 方 法 的 示例 代码 如 下 : 


1. Page (lt 

2 onShareAppMessage: function(res) 1 

EE i {res.from———"button') 1{ 

4 。 console.logl(res.target) // 页 面 内 “转发 ”按钮 的 信息 
2. } 

6 。 return 1 

了 2 title: ' 自 定义 转发 标题 '， 

日. Path: '/page/user?id=123" // 目 定义 转发 页面 路 径 
上 } 

1 六 .3 

11.}) 


说 明 : 第 8 行 引号 中 的 /page/user 是 自 定义 页 面 地 址 ，id=123 是 自 定义 
。 onTabItemTap(OBJECT): 单 击 tab 时 触发 ， 从 基础 库 1.9.0 开始 支 : 
容 处 理 。 其 OBJECT 参数 如 表 3-8 所 示 。 


表 3-8 onTabltemTap() 方 法 的 OBJECT 参数 


参数 说 明 
i 被 单 击 tabItem 的 序号 ， 从 0 开始 
pagePath 且 抽 woem 的 页 而 好 


onTabItemTap(OBJECT) 方 法 内 示例 代 人 码 如 下 : 


1. Page (1 

2 onTablItemTap (item) { 
console.1log(item.index) 

习 console.l1og (item.pagePath) 
CC "necm|le Taamrr fierm 十 & 赤 二 
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- Pagetl 
btnTap: functiont() 1 
console.1log(' 按 钮 被 单 击 。') 
} 
}) 


nS 


除了 bindtap 可 以 绑 定 单 击 事件 外 ， 还 有 很 多 事件 ， 评 见 3.2.1 入 “W) 
route 
人 在 Page0 方 法 中 可 以 使 用 this.route 合 看 当前 页面 的 路 任 地 址 。 例 如 : 


. Pagell 
onShow: function() 1 
console.l1og (this.route) 
} 
}) 


nS 


回 setData() 
在 Page(0 方 法 中 ，setData0 可 以 用 来 同步 更 新 data 属性 中 的 数据 值 ，- 
数据 到 WXML 页 面 上 。 其 参数 说 明 如 表 3-9 所 示 。 


表 3-9 setDatal() 人 参数 


字段 


与 ”| 要 更 新 的 一 个 或 多 个 数据 ， 格 式 为 {key1:valuel， 
data Object 十 
key2:value2,*…, keyN:valueN! 


callback setData 引起 的 界面 更 新 泻 染 完毕 后 的 回调 函数 
例如 在 Page0 的 data 中 定义 初始 数据 ，J 文件 代码 如 下 : 


- Pagell 
data:l1 
Today: “2018 L011" 


} 


i 


- }) 


此 时 WXML 页 面 的 {{today}} 初 始 值 为 2018-01-01。 
为 组 件 追 加 自 定义 单 击 事件 changeData，WXML 页 面 代码 如 下 : 


<view bindtap="changeData">{ {today}} </view> 
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圆 生命 周期 


小 程序 应 用 与 页 面 有 各 目的 生命 周期 疯 数 ， 它 们 在 使 用 过 程 中 也 会 互 
小 程序 应 用 生命 周期 如 图 3-3 所 示 。 


了 、 打 开 小 程序 a | 销毁 小 程 / 
mm ed ha | 销 尼 小 各 
进入 后 台 回 到 前 台 


onHide() 


图 3-3 ”小 程序 应 用 生命 周期 


小 程序 在 被 打开 时 会 首先 触发 onLaunchO 进 行程 序 启动 ,完成 后 调用 


页 面 ， 如 果 被 切换 进入 后 台 会 调用 onHide 中 ， 直 到 下 次 程序 在 销毁 前 重新 1 
onShow'()。 


小 程序 页 面 生命 周期 如 图 3-4 所 示 。 


onReady() 


初次 演 染 


、 打开 页 面 切 始 化 关闭 页 面 


onLoad() | 


onShow'() 


-onUnload() 


onHide0 | 


图 3-4 ”小 程序 页面 生命 周期 


在 小 程序 应 用 生命 周期 调用 完 onShowO 以 后 就 准备 触发 小 程序 页 面 生 
A i V 
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所 有 页 面 。 当 及 生路 由 切换 的 时 候 ， 页 面 栈 的 表现 如 表 3-10 所 示 。 
表 3-10 ”路 由 方式 与 页 面 栈 的 表现 


路 由 万 式 页 面 栈 的 表示 
初始 化 新 页 面 入 栈 

打开 新 页面 新 页 面 入 栈 

页 面 重 定 回 当前 页 面 出 栈 ， 新 页 面 
页 面 返回 页 面 不 断 出 栈 ， 直 到 目 
tab 切换 页 面 全 部 出 栈 ， 只 留 下 
持 加 载 页 面 全 部 出 栈 ， 只 留 下 


获取 页 面 栈 

小 程序 使 用 getCurrentPagesO0) 方 法 获取 当前 页 面 栈 的 实例 ， 实 例 将 以 ; 
序 给 出 。 其 中 ， 第 一 个 元 系 为 首页 ， 节 后 一 个 元 系 为 当前 页 面 。 

图 路 由 方式 

路 由 方式 及 页 面 生命 周期 函数 如 表 3-11 所 示 。 


表 3-11 0 


路 由 方式 触 发 时 机 
初始 化 小 程序 打开 的 第 一 个 页 面 _ 


2 
南面 重症 让 调用 Py 或 使 用 组 件 <navigator / 
Jen-type="redirectTo"/> 


调用 API wx.navigateBack 或 使 用 组 件 <navigator 
页 面 返 回 open-type="navigateBack"> 或 用 户 单 击 左上 角 onUnload) 
的 “返回 ”按钮 


tab 切 换 调 用 API wx.switchTab 或 使 用 组 件 <navi gator 
z / open-type 二 "switchTab"/> 或 用 户 切 换 tab 


于 吝 API wx.reLaunch 或 使 用 组 件 <naviegator 
重启 动 调用 | 或 使 用 组 件 ga i 
open-type="reLaunch"/> 


<navigator> 的 用 法 见 第 4 半 “ 小 程 订 组 件 ”，API 的 用 法 见 第 11 革 “3 
由 于 tab 页 面 的 切换 情况 比较 复杂 ， 这 里 用 A、B、C、D 几 个 页 面 众 1 
A、B 为 tabBar 页 面 ，C 是 从 A 打开 的 页面 ，D 是 从 C 打开 的 页 面 ，tab ; 


国 到 
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3.1.4 ”模块 化 


文件 的 作用 域 
在 小 程序 的 任意 JS 文件 中 声明 的 变量 和 函数 只 在 该 文件 中 有 效 ， 不 局 


声明 相同 名 字 的 变量 和 图 数 ， 不 会 互相 影 啊 。 


， 然 后 和 


如 果 需 要 跨 页 面 进行 数据 共享 可 以 在 appjjs 中 定义 全 局 变量 


用 getApp0 〇 获取 和 更 新 。 例 如 在 appjs 中 设置 全 局 变量 msg， 代 码 如 下 : 


1. App (1 

之 globalData: { 

msg: ' Goodbye 2018'"，  // 这 是 一 个 全 局 变量 
4. } 

3. }) 


假设 在 testjs 文件 中 布 里 修改 全 局 变量 msg 的 伍 ， 代 人 码 如 下 : 


.Var pbaetApply 
. app.globalData.msg="'Hello 2019" // 全 局 变量 被 里 新 


此 时 在 任意 其 他 JS 文件 中 再 读 取 msg 的 值 都 会 是 更 新 后 的 内 容 。 
模块 的 调用 
小 程序 文 持 将 一 些 公 共 JavaScript 代码 放 在 一 个 单独 的 JS 文件 中 ， 作 


可 以 被 其 他 JS 文件 调用 。 注 意 ， 模 块 只 能 通过 module.exports 或 者 exports 


i 


例如 在 根 目 孙 下 新 建 utils 文件 夹 并 创建 会 共 JS 文件 common.jjs， 代 但 


- function sayHellol(name} I 
console.log('Hello ss${name} ! ") 
} 
. function sayGoodbye (name) { 
console.log('Goodbye ss{name} ! ') 
} 
. module.exports.sayHello=sayHello / /推荐 使 用 这 种 语法 提供 ; 


. EXpDports.sayGoodbye~=sayGoodbye 


上 述 代 人 码 创建 了 两 个 目 定 义 函 数 ， 即 sayHello0 和 sayGoodbyeO， 了 且 痢 


再 要 注意 的 是 ，exports 是 module.exports 的 一 个 引用 ， 因 此 在 模块 中 随意 要 
会 造成 未 知 错误 。 


fi "Err =- 一 | mi 国 | ms Fe rE rT = ,C1— 


如 获取 用 户 信息 、 本 地 存储 、 地 理 定 位 等 。 常 用 的 API 如 下 。 
。 网络: 实现 小 程序 与 服务 器 端的 网 络 交 互 。 
。 媒体 : 实现 图 片 、 录 音 、 音 /视频 和 相机 管理 。 
e 文件 : 实现 临时 文件 和 本 地 文件 的 管理 。 
e。 数据 : 实现 小 程序 本 地 数据 的 缓存 。 
。 位置 : 使 用 小 程序 获取 地 理 位 置 和 控制 地 图 组 件 。 
。 设备 : 获得 手机 内 存 、 网 络 、 传 感 咒 、 扫 码 、 剪 贴 板 、 振 动 等 功能 
。 界面 : 实现 交互 反馈 、 导 航 条 设置 、 页 面 导航 、 动 画 、 绘 图 等 功能 
这 些 API 及 其 相关 标签 会 在 后 续 章节 陆续 介绍 。 


co 


视图 层 主要 负责 视图 的 显示 ，WXML 页 面 、WXSS 样式 表 和 组 件 都 是 
3.2.1 WXML 


WXML 的 全 称 是 WeiXin Markup Language 〈 微 信 标 记 语 言 )， 类 似 于 . 
使 用 < 标签 > 和 </ 标 签 > 构建 页 面 结构 的 语言 。 

WXML 具有 数据 绑 定 、 列 表 泻 染 、 条 件 泻 染 、 模 板 、 事 件 和 引用 的 落 

数据 绑 定 

1) 倍 单 绑 定 

在 WXML 页 面 中 可 以 使 用 {{ 变 量 名 }} 的 形式 表示 动态 数据 。 例 如 : 


<View>{ {msg}}<view> 


此 时 WXML 页 面 上 不 会 显示 msg 这 个 词 ， 而 是 会 显示 这 个 变量 对 应 | 
值 都 来 自 JS 文件 的 data 属性 中 的 同名 变量 。 例 如 : 


1. Page l(t 

学 data: [| 

3 msg: ' 你 好 ! ， 
4. } 

可 
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}) 


3) 控制 属性 绑 定 
控制 属性 也 可 以 使 用 动态 数据 ， 但 必须 在 引号 内 。 
WXML 页 面 的 相关 代码 如 下 : 


<view wx:if='{{condition}}'> 测 试 </view> 


JS 文件 的 相关 代码 如 下 : 


1. Page l(t{ 

人 data: I 

3 condition: false 
入 =- } 

D。 }) 


上 述 代码 表示 测试 组 件 不 被 显示 出 来 。 
4) 天 键 子 绑 定 
如 果 直 接 在 引号 内 写 布尔 值 也 必须 用 双 花 括号 括 起 来 ， 例 如 : 


. <view wx:if="' {1false}}"'> 测 试 1</view> 
. <view wx:if="' {1truel}}'> 测 试 2</view> 


注意 : 不 可 以 去 掉 双 花 括 号 直接 写成 Wx:if='false'"， 此 时 false 会 被 认 . 


转换 为 布尔 值 后 表示 true。 


记 3 请 


5) 运算 绑 定 
在 双 花 括号 内 部 还 可 以 进行 简单 的 运算 ， 其 支持 的 运算 有 三 元 运算 、: 


、 字 符 串 运算 和 数据 路 径 运 算 。 


三 元 运算 的 示例 代码 如 下 : 


. <1--WXML 页 面 代码 --> 
. <vVview hidden="{{result ?3 true: falsel}}' > 该 组 件 将 被 隐 叫 </view> 


. /71JS 文件 代码 
-EPEagettti 


data: 1 
result: false 
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双 化 括号 内 的 atb 会 进行 算术 运 异 ， 但 是 注意 括号 外 面 的 + 会 原封 个 : 


起 任何 算术 运算 作用 。 


Ba 


WY 


Re 


I 


I 


中 


逻辑 判断 的 示例 代码 如 下 : 


.过 1--WXML 页 面 代码 --> 
2 5 人 该 组 件 将 被 显示 </view> 


/1JS 文件 代码 
Page (1{ 
data: 1 
re 
} 
}) 


此 时 ， 判 断 x=5 返回 true， 因 此 wx:if 条 件 成 并 。 
字符 串 运算 的 示例 代码 如 下 ; 


。 <1-WXML 贝 面 代码 -一 > 
。 <VIiew> {1{' 你 好 '+name} }</view> <1!-- 显 示 的 结果 是 “你 好 


/1JS 文件 代码 
Page (1 
data: 1 
name: ' 小 程序 ' 
} 
上 


此 时 ， 双 花 括号 中 的 “+” 亏 起 到 了 连接 前 后 字符 串 的 作用 。 
数据 路 径 运 算 的 示例 代码 如 下 : 


.<1--WXML 页 面 代码 --> 
. <view>{{object.keyl}} {{array[l1]}}</view> <!-- 显 示 的 结果 是 上 


/V/ds 文件 代码 
Page (1 
data: 1 
object: | 
kewie elieo -3 
key2: "Goodbye ” 
} ， 
Arrav L018 T2019 2002201 


了 
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下 


:. 1}) 


上 述 代码 中 的 x 会 被 栓 换 成 数字 3， 从 而 形成 数组 [1,2,3,4]。 
对 象 组 合 的 示例 代码 如 下 : 


. <! 一-WXML 页 面 代码 -> 


- <template 1s="test" data="{ {username: valuel, Passwor' 


</template> 


/Vs 文件 代码 
Page (1{ 
data: 1 
Valuel : ‘admin', 
value2 : "1234567" 
} 
}) 


上 述 代 人 码 最 终 会 组 合 出 对 象 {username: 'admin', password: '123456'}。 上 是 


部 分 使 用 了 <template> 标 签 ， 该 标签 可 以 用 于 定义 模板 。 


用 户 也 可 以 使 用 “...” 符 写 将 对 象 内 容 展开 显示 ， 不 例 代 人 码 如 下 : 


.< 1--WXML 页 面 代码 --> 
。 <template is="test™ data="{{...student, gender: 2}}"></templs 


//JSs 文件 代码 
Page ({ 
data: | 
student: 1 
上 可 于 了 


stuName: ' 张 三 " 


}) 


上 述 代 人 码 最 终 会 组 合 出 对 象 {stuID:'123'. stuName:' 张 三 ', gender: 2}。 
如 果 对 象 中 元 紊 的 key 和 value 名 称 相 同 ， 可 以 省 略 表 达 。 示 例 代 码 刀 


.<1--WXML 页 面 代 码 --> 
. <template is="test" data="{{x, y}}"></template> < 


. //JS 文件 代码 


Bacefl 


DT 


0 .1) 
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data: 1 
Sby: 
> 
了 
} 


y:6 // 这 里 与 第 5 行人 存在 相同 的 key 名 称 Y， 将 复 需 前 者 的 值 
} 


上 述 代码 了 最终 会 组 合 出 对 象 {x:1, y:6, z:3}。 

列表 泻 染 

1) 简单 列表 

小 程序 在 组 件 上 使 用 wx:for 属性 实现 列表 洽 染 ， 即 同一 个 组 件 批量 出 


不 同 。 其 原理 是 使 用 wx:for 绑 定 一 个 数组 ， 然 后 就 可 以 自动 用 数据 中 的 每 
组 件 ， 形 成 批量 效果 。 
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后 LU 请 


例如 : 


-<1 ——WXMD——> 
. <View wx FOr=" [Iarraviti > 学 生 11index}}: {{item}}</view> 


/ /JS 文件 代码 
Page ({ 
data:l{ 
array:[ “ 张 二 '，' 李 四 "，' 王 五 "] 
} 
}) 
运行 结果 等 同 于 


.<View> 学 生 0; 张 二 </view> 
.<View>3> 学 生 1: 李 四 < /view> 
.<View> 学 生 2， 王 五 </view> 


在 以 上 代码 中 ，index 是 数组 当前 项 下 标 默 认 的 变量 名 ，item 是 数组 当前 
用 户 也 可 以 使 用 wx:foritem 和 wx:for-index 目 定义 当前 元 对 和 下 标的 ; 


例 代 码 的 WXML 部 分 修改 如 下 : 


| 
2 
人 


<View wx:for="'{{array}}" wx:for—index="stulD’' wx:for—itemQ=" 
学 咎 {{stuID}}: {{stuName]}} 
< /view 
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4. 
= 


<view> 学 生 3: a</view> 
<View> 学 生 4: y</view> 


显然 这 不 是 预期 效 采 。 


人 


I 


2) 散人 套 列 表 


wx:for 还 可 以 仍 区 出现 ， 例 如 九 九 乘法 口 决 表 的 代码 如 下 : 


氨 一 一 克基 ML 一 一 > 
- <View wx:for="{{array}}™ wx:for-item—="1i"»> 
<view wx:for="{{array}}™” wx:for-item-"]"> 
<view wx:1if="{{1i <= J}}"> 
tn 
</Vview> 
</vVview> 
</view> 
/1JS 文件 代码 
Page (1 
data:1 
array: [ly 2r 3, dr Sr Gr 1 Br 3] 
} 
}) 


3) 多 市 后 列表 
用 户 可 以 将 wx:for 用 在 <block> 标 使 上 ， 以 泻 染 一 个 包含 多 市 点 的 结 术 


1. <block wx:for="{{[“ 张 三"，' 李 四 "，' 王 五 '] }}"> <1-- 数 组 也 可 以 直接: 
2. ZVIiEW> 3 [lindex}} </Yiew> 

3 ZVIiews Wo: TIitemil) /viens 

dd <blocks 


DT 


运行 结果 等 同 于 : 


view> FS 0 </views 
<view> 姓名 : 张 二 </view> 
view> To: T </view> 
<view> 姓名 : 李 四 </view> 
ICW> Fo: 2 < /view 


<view> 姓名 : 王 五 </view> 


注意 <block> 并 不 是 一 个 组 件 ， 它 仅仅 是 一 个 包装 元 素 ， 不 会 在 页 8 
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上 述 提示 的 大 致 内 容 是 建议 用 户 使 用 wx:key 属性 提高 wx:for 的 性 能 
这 是 由 于 如 果 列 表 中 的 项 目 位 置 会 动态 改变 或 者 有 新 的 项 目 添加 到 列 : 


表 乱 序 。 如 果 用 户 明确 地 知道 该 列表 是 静态 的 或 者 顺序 不 重要 ， 可 以 选择 ; 


右 要 避免 乱 订 的 情况 或 人 不想 看 到 该 提示 , 可 以 使 用 wx:key 属性 指定 列 : 


识 从 。wx:key 的 值 以 下 面 两 种 形式 提供 。 
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。 字符 串 : 代表 在 wx:for 循环 数组 中 的 一 个 项 目 属性 ， 该 属性 值 需 : 
字符 串 或 数字 ， 且 不 能 动态 改变 。 

。 你 留 关 键 子 *this: 代表 在 wx:for 循环 中 的 项 目 本 映 ， 这 种 表示 需 : 
的 字符 串 或 者 数字 。 

这 里 以 wx:key 属性 为 自 定义 字符 串 为 例 ， 代 码 如 下 : 


i 


.<view wx:Tor="{T1T[L "六 二 " "地 四" "于 于 "1]™” wr: Kev "stultinc 


<view> 学 牛 11index}j}: {{item}} </view> 


. </view> 


运行 结果 等 同 于 : 


.<view>» 学 生 0: 张 二 </view> <!—-wx:kevy='stu0'—» 
i os | 1 . 一 一生 
.<view> 学 生 1: 李 四 </view> <!--wx:key='stul'——> 
Tew> 学 生 2; 于 TI</view> < Wx: Kev—"stu2 


当 数 据 改变 才 致 页 面 补 重新 渔 染 时 会 目 动 校正 市 有 key 的 组 件 ， 以 确 1 


并 且 提高 列表 演 染 时 的 效率 。 


Ea 


条 件 泻 染 
1) 傈 单条 件 
在 小 程序 框架 中 使 用 wx:i 人 "fconditiony1" 判 断 是 否 需 要 泻 染 该 代码 扶 


0 ,hd bE Ee, 
. <view wx:if="{{condition}}"> 测 试 组 件 </view> 


1. /AJS 文件 代码 

2. Page lt 

志 data:l1{ 

4. condition: true 
.区 } 

60. 上 
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由 于 x>5 不 成 立 ，A 组 件 不 被 显示 ; 他 2 成 立 ，B 组 件 被 显示 并 且 耻 所 
2) 多 节操 条 件 
如 果 要 一 座 性 判断 多 个 组 件 标 容 ， 可 以 使 用 <block> 标 签 将 多 个 组 人 
<block> 上 使 用 wx: 下 控制 属性 。 例 如 : 
1 。 <block wix:1f="{{true}} "> 
有 <View> Viewl </view> 
3 
一 


<View> View2 </view> 
. </blocky> 


此 时 可 以 同时 控制 viewl 和 view2 的 显示 与 隐 疾 。 
3) wxiif 与 hidden 
读者 通过 学 习 可 以 发 现 ，wx:if 和 hidden 属性 都 可 以 规定 组 件 的 显示 ; 
种 属性 的 对 比如 表 3-13 所 示 。 
表 3-13 wxiif 与 hidden 属性 的 对 比 


布尔 全，true 为 显 
wx:1f i 
示 ，false 为 隐藏 


布尔 值 ,trmue 为 隐 | 无 论 条 件 是 true 或 false， 初 始 束 会 被 泻 染 ， 
藏 ，false 为 显示 简单 地 控制 显示 与 隐藏 


hidden 


综 上 所 述 ,， 如 果 需 要 频繁 地 切换 组 件 , 用 hidden 更 好 ; 如 果 在 运行 时 入 
则 wx:f 更 好 。 开 友 痢 可 以 根据 实际 需要 选择 其 中 一 种 属性 或 两 种 组 合 使 月 
模板 
小 程序 框 染 允许 在 WXML 文件 中 提供 模板 ‘template )， 模 极 可 以 用 - 
然后 在 不 同 的 页 面 航 重复 调用 。 
1) 定义 模板 
小 程序 使 用 <template> 在 WXML 文件 中 定义 代码 请 段 作为 模板 使 用 ， 
使 用 name 属性 目 定 义 模板 名 称 。 例 如 : 
1]. <template name="myTemp"> 
2 <V1IeEW> 
5 <text> Name: {{namel}} </text> 
4 


<text> Age: {{age}} </text> 


ee 
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. /1/ds 文件 代码 


. Page ll 


data:{ 
student: I 
name: ' 张 三"'， 
ge: 20 
} 
} 


: 1}) 


模板 拥有 自己 的 作用 域 , 只 能 使 用 data 传 入 的 数据 。 上 述 代 码 表示 引 且 


的 模板 ， 并 且 姓 名 和 年 龄 分 别 更 新 为 张 三 和 20。 


事件 

事件 是 视图 层 到 馆 辑 层 的 通信 方式 ， 有 以 下 特点 : 

e。 可以 将 用 户 的 行为 反 饥 到 志和 辑 层 进行 处 理 ; 

e。 可 以 绑 定 在 组 件 上 ， 当 触 友 事件 时 吏 会 执行 馆 辑 层 中 对 应 的 事件 处 
e 对象 可 以 携 市 额外 信息 ， 例 如 id、dataset、touches。 

1) 事件 的 使 用 方式 

自 完 需要 在 WXML 页 面 为 组 件 绑 定 一 个 事件 处 理沙 数 ， 例 如 : 


<button id="myBtn" bindtap="myTap”™ data-my 一 "hello"> 按 钮 组 件 </bu 


上 述 代 码 表 示 为 投 钮 绑 定 了 一 个 触 换 单 击 事件 ， 用 手指 触 措 后 将 


myTapO。 其 中 data-* 为 事件 附加 属性 ， 可 以 由 用 户 目 定义 或 省 略 不 写 。 


然后 必须 在 对 应 的 JS 文件 中 添加 同名 函数 ， 右 尔 数 不 存在 ， 则 会 在 侧 


Page tt 
myTap :function(e){f 7/ myTap:ftunction(e) 也 可 以 简写 为 myTar 
console.1log le) // 打 印 输出 事件 对 象 
} 


- }) 


运行 代码 ， 然 后 触摸 单 击 该 按钮 ，Console 控制 台 输 出 的 内 容 如 图 3-6 


Console Sources Network Performance Memory Application 


top | Filter De 


Be Une "Fan fF mecFAm: REQ9 Famamefres Amment TrAaat*: 和 用 


站 微 信 小 程序 开发 零 基 础 入 门 “站 kr 


8 . } 
> 上， 
1l0. qdetails dx: 2Z14,. w: 工 / 


11. touches:|I1 

有 ili1dent1ifier:0, 
1 pageX:214, 
14. pageY:1i.5, 


| clientX:214, 
6. clientY:1i.s 
| 

18.1} 


由 此 可 见 输出 的 事件 对 象 包含 了 按钮 的 id 名称、 附属 的 data-my 属性 
件 类 型 等 信息 。 例 如 想 获 得 data-my 中 的 数据 值 ， 可 以 描述 为 e.currentTar 
发 者 之 后 可 以 利用 这 些 信 息 进行 后 续 的 代码 编写 。 


2) 事件 的 分 次 


事件 分 为 秆 泡 事 件 和 非 冒 泡 事 件 ， 说 明 如 下 。 

。 上 由 礼 事件: 当 一 个 组 件 上 的 事件 被 触 及 后 ， 该 事件 会 同 父 太后 传 过 
。 非 昌 泡 事件 : 当 一 个 组 件 上 的 事件 被 触 肥 后 ， 充 事件 不 会 网 父 失 局 
WXML 中 文 持 的 帅 泡 事件 如 表 3-14 所 示 。 


类 型 


touchstart 


touchmove 
touchcancel 
touchend 
tap 


lonepress 


lonetap 
transitionend 
animationstart 
animationiteration 


anlimationend 
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表 3-14 WXML 中 支持 的 冒 泡 事件 


触发 条 件 
手指 触摸 动作 开始 
手指 触摸 后 移动 
手指 触摸 动作 被 打 断 ， 例 如 来 电 提 醒 、 弹 窗 
手指 触摸 动作 结束 
手指 触摸 后 马上 离开 


手指 触摸 后 超过 350ms 再 离开 , 如 果 指 定 了 事件 回调 函数 并 角 
事件 将 不 被 触发 (最 低 版 本 为 1.5.0) 

手指 触摸 后 超过 350ms 再 离开 (推荐 使 用 longpress 事件 代 桨 
会 在 WXSS transition 或 wx.createAnimation 动画 结束 后 触发 
会 在 一 个 WXSS animation 动 男 开始 时 触 友 

会 在 一 个 WXSS animation 一 次 迭代 结束 时 触发 

会 在 一 个 WXSS animation 动画 完成 时 触发 

= 本 一 上 卡 上 二 T Ta Tb Ar | = 二 日 十 太古 A YY 
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bind 事件 和 catch 事件 的 区 别 是 ，bind 事件 绑 定 不 会 阻止 骨 泡 事件 回 ] 
绑 定 可 以 阻止 骨 泡 事件 同上 冒 泡 。 
例如 有 3 个 <view> 组 件 A、B、C， 其 中 A 包含 B、B 包含 C， 代 码 好 


1. <view id="A" bindtap="tapl"> <!-- 冒 泡 事 件 ， 但 没有 父 节点 了 不 传递 
ee View A 

3 <VIiIeEwWw lid="B”" catchtap="tap2"> <1-- 阻 止 了 冒 泡 事件 ， 不 传递 给 父 ; 
4. View B 

5. <view id="C" pindtap="tap3"> <1-- 冒 泡 事件 ， 传 递 给 父 节 点 Vie 
6. View C 

二 </Vview> 

8 . </Tiew> 

9. </view> 


此 时 如 果 单 击 C 组 件 会 触发 tapp3， 然 后 tap 事件 会 同上 冒 泡 至 父 节 点 
tap2,， 但 由 于 B 组 件 使 用 的 是 catchtap， 所 以 阻止 了 tap 事件 继续 由 泡 : 如 5 
触 友 tap2; 蛙 击 A 组 件 会 触 友 tap1。 

4) 事件 的 捕获 阶段 

目 基 础 库 版 本 1.5.0 起 ， 触 插 尖 事件 文 持 捕获 阶段 ， 可 以 在 组 件 的 刷 ; 
进行 事件 的 捕获 ， 使 其 无 法 曙 泡 。 捕 获 阶 段 事件 的 顺序 与 是 泡 阶 段 完 全 相 ， 
行 捕获 。 

事件 捕获 的 写法 是 capture-bind (或 capture-catch ) :key=value 的 形式 ， 

。 capture-bind: 在 冒 泡 阶段 之 前 捕 绪 事 件 。 

。 capture-catch: 在 冒 泡 阶段 之 前 捕获 事件 ， 并 且 取消 冒 泡 阶段 和 中 

e key: 事件 的 类 型 ， 例 如 tap、touchstart 等 ， 但 只 能 是 和 触 后 共事 件 。 

。 value: 一 个 字符 串 ， 击 要 在 对 应 的 Page 中 定义 同名 的 图 数 。 

例如 有 两 个 <view> 组 件 A 和 B， 其 中 A 包含 B， 代 码 如 下 : 


1. <view id="A" bindtap="tapl”" capture~bind:tap="tap2"> 
View A 

<VLIew lid="B”" bindtap="tap3" capture-bind:tap="tap4"> 
4. View B 

Sj </view> 

6. </view> 


=P | "a 二 Ea | I Poe, nih, i LW pp -=p 1 i 1 
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表 3-15 事件 参数 
基础 事件 (BaseEvent) 对 象 属性 列表 


属性 说 明 
type 事件 类 型 
timeStamp 事件 生成 时 的 时 间 截 
target 触发 事件 的 组 件 的 一 些 属性 值 集合 
currentTarget 当前 组 件 的 一 些 属 性 值 集合 
目 定 义 事件 (CustomEvent) 对 象 属性 列表 (继承 BaseEvent) 
属 性 说 明 
detail 额外 的 信息 
触摸 事件 (TouchEvent〉 对 象 属性 列表 (继承 BaseEvent) 
属性 说 明 
touches Array 触摸 事件 ， 妆 前 停留 在 屏 大 中 的 触 扳 
changedTouches 触摸 事件 ， 当 前 变化 的 触摸 点 信息 站 


注意 : <canvas> 组 件 中 的 触摸 事件 不 可 以 冒 泡 ， 所 以 没有 currentTarg 


基础 事件 对 象 中 的 target 和 currentTarget 属性 包含 的 参数 相同 ， 如 表 3 


表 3-16 target 和 currentTarget 参数 


属 性 类 型 说 明 

id 当前 组 件 的 ID 

tagName 当前 组 件 的 类 型 

dataset 当前 组 件 上 由 data- 开 头 的 自 定义 属 


其 中 dataset 只 能 接受 data-* 的 传递 形式 ， 例 如 ; 
<button blIndtap= mvyITap- data-test="hello"> 按 钮 组 件 </pbutton> 
触发 事件 后 dataset 所 获得 的 集合 就 是 {test: "hello"}。 


如 果 描 述 多 个 词 用 连 字 符 (-) 连接 , 会 被 强制 转换 为 驼峰 标记 法 〔 又 称 
特点 是 第 一 个 单词 全 部 小 写 ， 后 面 每 个 单词 只 有 首 字 母 大 写 )， 例 如 ; 


<button bindtap="myTap” data—my—test="hello”" > 按 馈 组件 </button> 


| fli = fi ~ 4 ， P= A A a 
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表 3-17 touch 对 象 参 数 
属性 一 
identifier 触摸 点 的 标识 从 
pageX, pageY 距离 文档 左上 角 的 距离 ， 文 档 的 左上 角 为 原点 ， 横 向 为 


. 距离 页 面 可 显示 区 域 ( 屏 项 除 去 守 航 条 ) 左上 角 的 距离 
cllentX. cllentY Number 向 为 立轴 


canvas 触 近 事件 中 扒 市 的 touches 是 CanvasTouch 对 象形 成 的 数组 , 属 


表 3-18 ” CanvasTouch 对 象 参数 


属 性 | 类 型 说 明 


identifier 触摸 点 的 标识 和 从 
距离 Canvas 左上 角 的 距离 ，Canvas 的 左上 角 为 原点 ， 
X,Y Number 为 立轴 


changeTouches 属性 与 touches 完全 相同 ， 表 示 有 释 化 的 触 操 操 
(touchstart)、 位 置 变化 (touchmove)、 从 有 变 无 (touchend、touchcancel)。 

回 引用 

WXML 提供 了 import 和 include 两 种 文件 引用 方式 。 

1) 1mport 

小 程序 可 以 使 用 <template> 标 合 在 目标 文件 中 事先 定义 好 模板 ， 然 折 
<import 标 签 引用 <template> 中 的 内 容 。 

例如 ， 在 tmpl.wxml 文件 中 使 用 <template> 定 义 一 个 名 称 为 tmpl01 的 相 
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- <template name="tmpl01l"> 
<text>{ {text}}</text> 
3. </template> 


然后 在 站 页 Index.wxml 中 使 用 <import= 引 用 tmpl.wxml， 束 可 以 使 用 
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- <import SC LmP1 wxml"™/> 
2. <template is="tmpl0l™ data="{{text: ‘hello'}}"/> 


此 时 等 同 于 在 index.wxml 中 显示 了 了 : 


<text>hello</text> 
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- <import src="a.wxml™/> 


<text> 也 册 历 模板 </text> 


二 
2. <template name="B"> 
| 
4. </template> 


C 页 面 c.wxml 的 代码 如 下 : 


1. wimport 二 GE Dll 
2 <template is="A"/S> <!--~ 引用 模板 失败 ! CC 必须 目 己 impert A 才 可 以 
3. <tempilate 1s "Br"/> I 引用 模板 成 功 ! cC 页 面 有 mart 天 


这 是 为 了 避免 多 个 页 面 彼 此 互相 连接 引用 陷入 逻辑 错误 。 

2) include 

小 程序 使 用 <include> 将 目标 文件 除了 <template> 以 外 的 整个 代码 引入 ， 
件 的 代码 直接 复制 到 了 <include> 标 签 的 位 置 。 

例如 为 页 面 制 作 统 一 的 页 眉 、 页 脚 ， 示 例如 下 。 

页 眉 headerwxml 的 代码 : 


<Vview> 这 是 小 程序 的 页 眉 </view> 

页 脚 footerwxml 的 代码 : 
<view> 这 是 小 程序 的 页 脚 </view> 

首页 index.wxml 的 代位 : 
1. <include src="headqer .wxml"/> 


2. <Vview> 正 文部 分 </view> 


3. <include src="footer .wxml"/> 


<import> 标 签 更 适合 于 统一 样式 但 内 容 需要 动态 变化 的 情况 :; <includk 
须 改 动 目标 文件 的 情况 。 


3.2.2 WAXNS 


WXSS 文件 的 全 称 是 WeiXin Style Sheets 〈 微 信 样 式 表 )， 这 是 一 种 样 : 
WXML 的 组 件 样式 〈 例 如 尺寸 、 颜 色 、 边 框 效 来 等 )。 
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表 3-19 手机 设备 尺寸 单位 对 比 表 
设 备 rpx 换算 pXx〈 屏 幕 宽 度 /750) px 换算 rpx 
iPhone5 lpx 
iPhone6 lpx 
iphone6 Plus lpx- 


提示 : 由 于 iPhone6 换算 较为 方便 ， 建 议 开 发 者 用 该 设备 作为 视觉 设 


样式 导入 

小 程序 在 WXSS 样式 表 中 使 用 @import 语句 导入 外 联 样 式 表 ，@impo 
外 联 样 式 表 的 相对 路 径 ， 用 ;表示 语句 结束 。 

例如 有 公共 样式 表 common.wxss， 代 码 如 下 : 


1. -。 工 人口 { 


A COlor: red:; 
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然后 可 以 在 其 他 任意 样式 表 中 使 用 @import 语 句 对 其 进行 引用 。 例 如 a. 


1. @import "common .wxSss"} 

22. .blue 1{ 

color:blue,; 

de 
此 时 ，.red 和 .blue 样式 均 能 被 页 面 a.wxml 使 用 。 
常用 属性 


WXSS 所 支持 的 样式 属性 与 CSS 属性 类 似 ， 为 方便 读者 理解 本 节 的 z 
列 出 了 部 分 第 用 样式 属性 和 参考 值 。 


表 3-20 意 用 样式 属性 和 参考 值 


样式 属性 参 考 什 


backeround-color 闫 色 名 ， 例 如 red 表示 红色 
color 同上 


font-size 字体 大 小 例如 16px 表示 16 像 紊 大 小 的 字 4 


border 
width 


例如 3px solid blue 表示 宽度 为 31 
TEST 
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1) style 
style 属性 又 称 为 行内 样式 ， 可 直接 将 样式 代码 写 到 组 件 的 首 标签 中 。 


<View style="color:red;background-color:yellow"> 测 试 </view> 


上 述 代码 表示 当前 这 个 <view> 组 件 中 的 文本 将 变 为 红色 、 青 景 将 变 为 
style 也 文 持 动态 样式 效果 ， 例 如 : 


<VIiIew style="color: {{color}} "> 疯 试 </view> 


上 述 代码 表示 组 件 中 的 文本 颜色 将 由 页 面 JS 文件 的 data.color 属性 规 ; 

官方 建议 开 友 首 尽 量 不 要 将 衣 态 的 样式 与 进 style 中 ， 以免 影 啊 痊 染 速 
样式 ， 可 以 统一 写 到 class 中 。 

2) class 

小 程序 使 用 class 属性 指定 样式 规则 , 其 属性 值 由 一 个 或 多 个 日 定义 样 
样式 类 名 之 则 用 空格 分 隔 。 

例如 ， 在 test.wxss 中 规定 了 两 个 样式 : 


Is sstyledll 
2 color: red; // 文 字 为 红色 
So 
4. .style02l 
< font-size: 20px; // 字 体 大 小 为 20 像素 
6. font-weight: bold; // 字 体 加 粗 
于 
在 test.wxml 中 代码 如 下 : 


<View Class="style01 stvle02"> 测 斌 </view> 


上 述 代码 表示 组 件 同 时 接受 .style01 和 .style02 的 样式 规则 。 注 意 ,， 在 < 
内 部 不 需要 加 上 类 名 前 面 的 点 。 

选择 器 

小 程序 目前 在 WXSS 梓 式 表 中 文 持 的 选择 闫 如 表 3-21 所 示 。 


表 3-21 选择 器 


A EE EE i EE 
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图 全 局 样式 与 局 部 样式 

对 于 小 程序 WXSS 样式 表 中 规定 的 样式 ， 根 据 其 作用 范围 分 为 两 类 : 
样式 为 全 局 样式 ， 作 用 于 每 一 个 页 和 面 ; 在 页 面 WXSS 文件 中 定义 的 样式 为 
在 对 应 的 页 面 ， 并 会 禾 孟 app.wxss 中 相同 的 选择 侣 。 


3.2.3 组 件 


组 件 是 WXML 页 面 上 的 基本 单位 ， 例 如 小 程序 页 面 上 的 按钮 、 图 瞩 : 
件 泻 染 出 来 的 ， 详 细 介 绍 见 第 4 章 “ 小 程序 组 件 ”。 


3.3.1 基本 概念 


flex 模型 
小 程序 使 用 flex 模型 提高 页 面 布局 的 效率 。 这 是 一 种 灵活 的 布局 模型 
不 同 屏幕 尺寸 及 设备 类 型 时 该 模型 可 以 确保 元 素 在 恰当 的 位 置 。 
容器 和 项 目 
在 flex 布局 中 ， 用 于 包含 内 容 的 组 件 称 为 容器 (container)， 容 丹 内 i 
(item)。 容 句 人 允许 包含 符 套 ， 例 如 : 
1. <view id="A"> 
2 <Vlilew ld="B"> 
人 <view id—"C"></view> 
4 
口 


</viewy> 
. </view> 


在 上 述 代码 中 共有 3 个 <view> 组 件 ， 对 于 A、B 来 说 ，A 是 容 右 ，B 下 
来 说 ，B 是 容器 ，C 是 项 目 。 

坐标 轴 

flex 布局 的 坐标 系 是 以 容 右 左上 和 角 的 点 为 原点 ， 目 原点 往 右 、 往 下 两 : 
情况 下 是 水 平 布局 ， 即 水 平方 回 从 左 往 右 为 主轴 (main axis)， 和 于 直方 回 | 
(cross axls)， 如 图 3-7 (a) 所 示 。 用 户 也 可 以 使 用 样式 属性 flex-direction: c 
又 办 的 位 置 互 换 ， 如 图 3-7 〈b) 所 示 。 
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四 flex 属性 
在 小 程序 中 ,与 flex 布局 模型 相关 的 样式 属性 根据 其 所 属 标签 的 类 型 1 
和 项 目 属性 。 


容 耸 属性 用 于 规定 容 耸 的 布局 方式 ， 从 而 控制 髓 部 项 目的 排列 和 对 齐 ， 


表 3-22 flex 布局 中 的 容器 属性 
属 性 其 他 有 效 值 


flex-direction | 设置 项 目的 排列 方 回 row-reverselcolumn|column-reverst 


flex-wrap 设置 项 目 古 否 换 行 wraplwrap-reverse 
设置 项 目 在 主轴 方向 上 的 
JTustify-content 对 齐 方式 flex-start | flex-end|center|space-between|spac: 


式 


a 当 多 行 排 列 时 , 设置 行 在 交 i tlex-startlcenterlflex-endlspace-betv 
ee 又 轴 方 向 上 的 对 齐 方式 space-evenly 


项 目 属 性 用 于 设置 容 需 内部 项 目的 太 寸 、 位 置 以 及 对 齐 方式 ， 如 表 3- 


表 3-23 flex 布局 中 的 项 目 属 性 
属性 其 他 丰 
order 设置 项 目 在 主轴 上 的 排列 顺 友 0 | <integer> 
flex-shrink | 收 红 在 主 籼 上 沪 出 的 项 目 | | <number> 
flex-grow | 扩张 在 主轴 方 回 上 还 有 空间 的 项 目 <number> 


flex-basis | 代 伏 项 目的 宽 / 电 属性 <length> 


设置 水 平方 测 齐 万 
alien-items 发 是 水 平方 同上 的 对 章 万 centerlflex-end|baseline|lflex-start 


flex-shrimk flex-grow 和 flex-basis 3 种 属 和 nonelanuto| 
eX : / ps 
性 的 综合 人 简写 方式 (Oflex-grow (flex-sth 


align-self | 设置 项 目 在 行 中 区 义 轴 上 的 对 齐 方 式 
例如 ， 无 法 确定 容器 组 件 的 宽 / 高 却 需 要 内 部 项 目 垂 直 拓 中 ，WXSS 代 


1.。 .containert 

有 displav: flex; /# 使 用 flex 布局 ( 必 写 语句 ) */ 
3 flex-direction: column; /* 排 列 方 铝 : 王 下 */ 

4. justify-content: center;  /* 内 容 调 整 ， 大 中 */ 
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后 续 草 丰 将 详细 讲解 这 些 属性 的 作用 。 
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。 column: 主轴 在 垂直 方向 上 从 上 而 下 , 项 目 按照 主轴 方向 从 上 往 下 排 
e column-reverse: 主轴 是 column 的 反方 同 ， 项 目 按 照 主 轴 方 同 从 下 


上 排列 。 


假设 有 项 目 A、B、C 3 个 组 件 ， 高 、 宽 均 相 同 ，flex-direction 取 不 同人 


的 效果 如 图 3-8 所 示 。 


主轴 
项 目 A 项 目 B 项 目 C 
flex-direction: row 
六 
祖 | 
(a) row (默认 值 》 
交叉 轴 
项 目 A 
项 目 B 
项 目 C 


十 
机 | flex-direction: column 


(cc) column 


_ 襄 冯 六 


主 
轴 


项 目 C 项 目 6 


flex-direction: row- 


Cb) row-reverse 


flex-direction: column- 


项 目 C 


项 目 B 


项 目 A 


(Cd) column-reverse 


3-8 ”flex-direction 属性 值 对 照 图 


flex-wrap 属性 


flex-wrap 属性 用 于 规定 是 合 人 允许 项 目 换行 ， 以 及 多 行 排 列 时 换行 的 方 


其 语法 格式 如 下 : 
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主机 、 
项 目 A ”项目 B 项 目 C 项目 D flex-wrap: 
项 目 D 
flex-wrap: nowrap 项 目 D flex-wrap: wrap 
变 。 交 
. X 项 目 A 项 
(a) nowrap (b) wrap (Cc) 


3-9 ”flex-wrap 属性 值 对 照 


justify-content 属性 
justify-content 属性 用 于 设置 项 目 在 主轴 方 同上 的 对 齐 方式 ， 以 及 分 配 


多 余 的 空间 。 
其 语法 格式 如 下 : 

- Containerl 

JuSstify-—-content: flex—start (上 默认 仁 》 | flex-end| center | 

space—around| space—evenly 
} 

对 属性 值 襄 明 如 下 。 

。 flex-start: 默认 值 ， 表 示 项 目 对 齐 主轴 起 点 ， 项 目 间 不 留 空 际 。 


center: 项 目 在 主轴 上 居中 排列 ， 项 目 间 不 留 空 除 。 主 轴 上 第 一 个 ] 


距离 等 于 最 后 一 个 项 目 离 主轴 终点 的 距离 。 
flex-end: 项 目 对 齐 主轴 终点 ， 项 目 间 不 留 空 际 。 


space-between: 项 目 间距 相等 ， 第 一 个 和 节 后 一 个 项 目 分 别离 起 操 
space-around: 与 space-between 相似 ， 不 同 之 处 为 第 一 个 项 目 离 主 : 
起 点 和 最 后 一 个 项 目 离 终点 的 距离 为 中 间 项 目 间 间距 的 一 半 。 
space-evenly: 项 目 间距 、 第 一 个 项 目 离 主轴 起 点 以 及 最 后 一 个 项 目 离 
点 的 距离 均 相 等 。 


这 里 以 水 平方 问 作 为 主轴 为 例 ， 假 设 有 项 目 A、B、C 几 个 组 件 ， 宽 
高 完全 相同 ，justify-content 取 不 同 值 时 的 效果 如 图 3-10 所 示 。 


主轴 、 
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z 主轴 z 

又 又 
和 justify-content: space-around justify-content: space-e 
(e) space-around (f) space-evenly 


图 3-10 〈 续 ) 


align-items 属性 
align-items 属性 用 于 设置 项 目 在 行 中 的 对 齐 方式 。 
其 语法 格式 如 下 : 


-Containerl 
align—items:stretch (默认 全 ) | flex-start | center | flex-end 
} 


对 属性 值 说 明 如 下 。 

。 stretch 《默认 值 ): 未 设置 项 目 尺 寸 时 将 项 目 拉 伸 至 填 满 交叉 轴 。 

e flex-start: 项 目 顶 部 与 区 叉 划 起 点 对 齐 。 

e center: 项 目 在 交叉 轴 居 中 对 齐 。 

。 flex-end: 项 目 撒 部 与 交叉 轴 终 点 对 齐 。 

。 baseline: 项 目 与 行 的 基线 对 齐 , 在 未 单独 设置 基线 时 等 同 于 flex-sta 

这 里 以 垂直 方 问 作为 主轴 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 ， 宽 上 度 
别 为 200rpx、300rpx、400rpx〔 取 值 为 stretch 时 车 不 设置 )，algn-items 取 
同 值 时 的 效果 如 图 3-11 所 示 。 


交 丸 轴 


便 比 


align-items: stretch 轴 align-items: flex-start 
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align-content 属性 
align-content 属性 用 于 多 行 排 列 时 设置 项 目 和 在 交叉 轴 方 同上 的 对 齐 方 : 
之 四 及 其 周围 多 余 的 空间 。 
其 语法 格式 如 下 : 
-ConNntainerl 


align-content: stretch (默认 值 》 | flex-start | center | flex-end 


1space—around | space—evenly 
} 
对 属性 值 说 明 如 下 。 


。 stretch: 执 认 什 ， 未 议 首 项 目 太 十 时 将 各 行 中 的 项 目 拉 伸 至 项 请 区 . 
目 太 十 时 项 目 太 二 不 变 ， 项 目 行 拉 伸 至 填 满 交叉 轴 。 

。 flex-start: 首 行 在 区 文 灿 起 点 开始 排列 ， 行 间 不 留 间 距 。 

。 center: 行 在 交叉 轴 中 点 排列 ， 行 间 不 留 间 距 ， 痛 行 离 交 义 轴 起 反 ; 


点 的 距离 相等 。 
。 flex-end: 尾行 在 交叉 轴 终 点 开始 排列 ， 行 间 不 留 间 距 。 


e space-between: 行 与 行 间 距 相 等 , 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉车 
。 space-around: 行 与 行 间 距 相等 ， 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉 ; 
与 行 间 间 距 的 一 半 ， 


。 space-evenly: 行 间 间距 、 首 行 离 交 义 轴 起 点 和 尾行 离 交 义 轴 终点 1 
距离 相等 。 


注意 : 多 行 排列 时 要 设置 flex-wrap 属性 值 为 wrap， 表 示人 允 许 换行 。 


这 里 以 水 平方 网 作为 主轴 为 例 ， 假 设 有 项 目 A~E 共 5 个 组 件 且 宽度 
同 ，align-content 取 不 同 值 时 的 效 采 如 图 3-12 所 示 。 


主轴 = 


align-content: space 


(e) space-between (f) space-around 


align-content: space-evenly 
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(g) space-evenly 


3-12 《 续 ) 


3.3.3 项 目 属性 


order 属性 
order 属性 用 于 设置 项 目 治 主轴 方 回 上 的 排列 顺序 ， 数 但 越 小 ， 排 列 越 
性 值 为 整数 。 
其 语法 格式 如 下 : 
.itemtf 


order: 0 (默认 值 ) | <integer> 
} 


这 里 以 水 平方 向 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 ， 宽 、 高 均 相 同 
order 取 不 同 值 时 的 效果 如 图 3-13 所 示 。 
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其 语法 格式 如 下 : 
- 工 七 emii{ 
flex-shrink: 1 (默认 值 ) | <number> 


} 


其 属性 值 为 项 目的 收缩 因子 ， 只 能 是 非 负 数 。 
当 发 生 洲 出 时 ， 项 目 尺寸 的 收缩 公式 如 下 : 


最 终 长 度 = 原 长 度 x (1- 淤 出 长 度 x 收 缩 因 于 / 压 盎 总 权重 ) 
注意 : 当 遇 到 小 数 的 情况 时 向 下 取 整 ， 不 进行 四 舍 五 入 .。 


其 中 压缩 忌 权重 的 计算 公式 如 下 : 
压 盎 总 权重 = 长 度 1x 收 缴 因子 1+ 长 度 2x 收 纵 因 子 2 … + 长 度 Wx 收 缩 因 于 N 


注意 : 当 从 左 往 右 为 主轴 时 ， 长 度 指 的 是 宽度 ; 当 从 上 往 下 为 主轴 
度 。 
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这 里 以 水 平方 向 为 例 , 假设 有 项 目 A、B、C 几 个 组 件 , 宽度 均 为 200p: 
分 别 设置 项 目的 收缩 因子 为 1、2、3，WXSS 示例 代码 如 下 : 


-A 
width: 200px; 
flex-shrink:1; /* 默 认 值 ， 可 以 省 略 该 属性 ， 不 写 */ 
} 
-BI 
width: 200px; 
flex—shrink:2; 
} 
er ek 
10. width: 200px; 
11. flex—shrink:3; 


皇上 LT 请 


假设 容 上 化 览 度 仅 有 S$00px， 此 时 3 个 项 目的 冤 上 度 之 和 为 600px， 显 然 
的 情 交 ， 因 此 触 肥 收缩 因 于 进行 宽度 压缩 。 
首先 计算 压缩 总 权重 : 
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容器 Wwidth:500px 
A B 人 A B 
区 
width:200px width:200px width:200px Ww width:183px Width:1 
(a) 项 目 组 件 在 压缩 前 b) 项 目 组 件 在 有 


图 3-14 flex-shrink 应 用 对 照 图 
需要 注意 的 是 ， 只 有 项 目的 flex-shrink 属性 值 总 和 大 于 1 时 溢出 长 度 : 
总 和 小 于 1 时 洲 出 长 度 的 计算 公式 如 下 : 
溢出 长 度 = 实际 溢出 长 度 x (收缩 因子 1+ 收 缩 因子 2+…+ 收 缩 因子 由 
例如 ， 上 面 示 例 中 项 目 A、B、C 的 flex-shrink 属性 值 如 果 分 别 更 新 为 
和 为 0.6， 小 于 1， 则 洲 出 长 度 的 计算 如 下 : 
溢出 长 度 =100x (0.1+0.2+0.3)=60px 
后 续 的 计算 和 前 面 完全 一 样 。 
图 flex-grow 属性 
flex-grow 属性 用 于 设 症 项 目 扩 张 因 子 。 当 项 目 在 主轴 方 同 上 还 有 剩余 


项 目 扩张 因子 进行 剩余 空间 的 分 配 。 
其 语法 格式 如 下 : 
- 1teml 


flex-grow: 0【《 默 认 值 ) | <number> 
} 


其 属性 值 为 项 目的 扩张 因子 ， 只 能 是 非 负数 。 
当 发 生 扩张 时 ， 项 目 尺 寸 的 扩张 公式 如 下 : 


最 终 长 度 = 原 长 度 + 扩张 单位 x 扩张 因子 


注意 : 当 遇 到 小 数 的 情况 时 向 下 取 整 ， 不 进行 四 舍 五 入 。 
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i 

6 - width: lO00px; 
i flex—grow:l1; 
S| 

2 | 

10. width: 100px; 
Tiex rown 2 


假设 容器 宽度 为 600px， 此 时 3 个 项 目的 宽度 之 和 为 300px， 显 然 会 ! 
余 空间 的 情况 ， 因 此 触发 扩张 因子 进行 客 度 扩张 。 
首先 计算 扩张 单位 : 


扩张 单位 =300/ (0+1+2)=100Px 


然后 将 剩余 空间 分 配给 项 目 宽度 ， 新 的 项 目 宽度 扩张 公式 如 下 : 


项 目 A 的 宽度 =100+100x0=100px 
项 目 B 的 宽度 =100+100x1=200px 
项 目 c 的 宽度 =100+100x2=300px 


由 此 可 见 ， 原 先 同样 宽度 的 项 目 组 件 由 于 扩张 因子 不 同 被 扩张 后 的 宽 | 
证 明了 扩张 因子 数值 越 和 大， 被 扩张 后 的 长 虐 越 长 。 
上 述 示例 的 示意 效果 如 图 3-15 所 示 。 


容器 width:600px EE 轴 容器 width:600px 


ee 四 本 到 


“100px ”100px ”100px 剩余 空间 宽度 300px 


(a) 项 目 组 件 在 扩张 前 (b) 项 目 组 件 在 和 
图 3-15 ”flex-grow 应 用 对 照 图 
需要 注意 的 是 ， 只 有 项 目的 flex-grow 属性 信息 和 大 于 1 时 扩张 单位 按 
和 小 于 1 时 扩张 单位 束 是 全 部 的 剩余 空间 。 
例如 ， 上 和 面 示 例 中 项 目 A、B、C 的 flex-grow 属性 全 如 条 分 别 更 新 为 
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需要 注意 的 是 , 数值 比 auto 的 优先 级 更 高 , 如 果 flex-basis 属性 值 为 aut 
而 width (或 height〉 属性 全 是 数值 ， 则 采用 数值 作 为 最 终 属 性 值 。 

这 里 以 水 平方 向 作为 主轴 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 且 宽度 : 
为 100px， 为 A 退 加 flex-basis 全 为 200px， 节 终 示 意 效 末 如 图 3-16 所 示 。 


A 


Width:100px width:100px Width:100pX 
flex-basis:200px 


图 3-16 ”flex-basis 属性 值 对 照 图 


由 该 图 可 见 ， 项 目 A 的 宽度 比 B 和 C 宽 ， 这 是 因为 flex-basis 的 优先 : 

flex 属性 

flex 属性 是 flex-grow、flex-shrink、flex-basis 的 位 写 方 式 ， 其 语法 格式 
- 1teml 


flex: none | auto | Qflex-grow @flex-shrink@flex-basis 


} 


大 将 属性 值 设 置 为 none， 等 价 于 00auto; 大 设置 为 auto， 等 价 于 11 
回 align-self 属性 
align-self 属性 设置 项 目 在 行 中 交叉 轴 方 同上 的 对 齐 方式 ， 用 于 才 兰 容 
这 人 么 做 可 以 对 项 目的 对 章 方式 做 特殊 处 理 。 
其 语法 格式 如 下 : 
- 1teml 


align—self: auto (默认 值 》 | flex-start | center | flex-end | bas 
} 


其 默认 属性 值 为 aato， 表 示 继 承 容 规 的 align-items 值 。 如 有 霖 容 右 没 有 有 
置 align-items 属性 ， 则 align-self 的 默认 便 auto 表示 为 stretch。 其 他 属性 值 : 
妥 align-items 的 说 明 。 

这 里 以 水 平方 向 为 例 ， 假 设 有 项 目 A、B、C、D 4 个 组 件 ， 其 中 A、B、 
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小 程序 组 件 


本 章 主要 内 容 是 小 程序 组 件 ， 小 程序 提供 了 丰富 的 组 件 供 开 发 者 使 用 ， 
以 进行 快速 开发 。 小 程序 组 件 按 照 功能 特点 目前 可 分 为 视图 容器 、 基 础 内 : 
媒体 、 地 图 和 画布 共 7 类 组 件 。 
本 章 学 习 目 标 
理解 什么 是 小 程序 组 件 ; 
掌握 小 程序 视图 容器 组 件 的 用 法 ; 
掌握 小 程序 基础 内 容 组 件 的 用 法 : 
掌握 小 程序 表单 组 件 的 用 法 ; 
掌握 小 程序 导航 组 件 的 用 法 ; 
掌握 小 程序 媒体 组 件 的 用 法 ; 
掌握 小 程序 地 图 组 件 的 用 法 ; 
学 握 小 程序 和 画布 组 件 的 用 法 。 


lL 


4.1.1 组件 的 介绍 


小 程序 组 件 是 视图 层 的 基本 组 成 单元 ， 扎 目 带 微 信 风格 UI 样式 和 特质 
用 户 在 小 程序 页 面 上 所 看 到 的 图 片 、 文 本 、 按 钮 等 都 属于 小 程序 组 件 。 小 ’ 
了 一 系列 基础 组 件 ， 通 过 组 合 这 些 组 件 可 以 进行 更 高 效 的 开发 。 

一 个 组 件 通 常 包括 < 开始 标签 > 和 </ 结 束 标签 >， 在 开始 标签 中 可 以 奶 l 
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性 都 使 用 小 写字 和 母 。 
其 中 id 属性 是 一 个 通用 属性 ， 可 以 被 所 有 组 件 使 用 。 小 程序 目前 提供 
表 4-1 所 示 。 


表 4-1 享 组 件 通 用 属性 
属性 名 称 备注 
_、， | 在 同一 个 页 面 中 用 庆 值 标识 唯一 
| 11 组 件 了 于 — th kA 
id 组 件 的 唯一 标识 能 有 多 个 过 值 相同 
class 组 件 的 样式 类 | 该 属性 值 在 WXSS 中 定义 有 关 样 : 
style 组 件 的 内 联 样式 | 可 以 动态 设置 内 联 样式 


hidden Boolean Boolean | 组件 的 显示 / 隐 跨 | 组 件 均 默 认为 显示 状态 


二 会 附带 将 该 属 
i pa 9 定义 属性 。。 | 当 组 作秀 发 事件 时 会 内 名 将 该 


bind*/catch* | EventHandler = EventHandler “| 组 件 的 事件 绑 定 /捕获 组 件 事件 


注意 : 除 上 述 7 种 通用 属性 外 ， 绝 大 部 分 组 件 还 之 有 自 定义 的 特殊 民 
的 功能 和 样式 进行 修饰 ， 这 些 属 性 将 在 各 类 组 件 中 详细 介绍 。 


4.1.2 组件 的 分 类 


组 件 按照 功能 主要 分 为 以 下 7 类 。 

。 视图 容 右 (View Container) 组 件 : 主要 用 于 规划 布局 页 面 内 容 。 

。 基础 内 容 (Basic Content) 组 件 : 用 于 显示 图 标 、 文 字 等 常用 基础 
。 表 蛙 (Form) 组 件 : 用 于 制作 表单 。 

e 导航 (Navigation) 组件 : 用 于 跳 转 指定 页 面 。 

。 媒体 (Media) 组 件 用 于 显示 图 片 、 音 频 、 视 频 等 多 妹 体 内 容 。 
。 地 图 (Map) 组 件 : 用 于 显示 地 图 效 末 。 

。 画布 (Canvas) 组件: 用 于 绘制 图 画 内 容 。 


4 由 攻 | 突 旺 和 旨 件 主要 癌 仿 和 和 种， 加 过 42 了 元 
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是 ，vView 容器 本 里 没有 大 小 和 颜色 ， 震 要 由 开 友 者 目 己 进行 样式 设置 。 
View 对 应 的 属性 如 表 4-3 所 示 。 


表 4-3 view 组 件 属性 


属 性 名 说 上 明 


hover-class 指定 按 下 去 的 样式 类 。 如 果 是 默认 值 nor 

a 1.。 | 指定 是 否 阻止 本 容器 的 祖先 节点 出 现 单 ; 
本 有 效 ) 

hover-start-time Number EE 按 住 本 容器 后 多 久 出 现 单 击 状态 (单位 ;> 

hover-stay-time 手指 松 开 后 蛙 击 状态 保留 的 时 长 (单位 


【 例 4-1】 视图 容 兹 组 件 view 的 简单 应 用 
WXML (pages/demo01/viewy/viewwxml) 文件 代 人 如 下 : 


1. <view class='title'>1. 视 图 容 问 view 的 简单 应 用 </view> 

2. <Vliew Class='demo—box'> 

: <view class="title'>({1) 不 阻 正 父 容 问 的 view hover</view> 
4. <VILeW Class="Vview Parent hover-class="view hover'> 
5 我 是 父 容器 View 

6. <VlLeWw Class='view Son'" hover—class='view hover'> 
我 是 子 容 髓 view 

</Vview> 

2 < /View> 

10.</view> 

11.<VvLew class="'demo—box'> 

12 <View Class='title'>(2) 阻止 父 容 器 的 View hover</view> 
13 <view Cass= VIEW parent”" hover-class='view hoVe > 
14 我 是 父 容器 view 

下 <view Class=" "View SO hover class= Vview howeI Powe 了 一 3 七 局 
16. 我 是 村 容器 view 

17 </view> 

18 </vVview> 

19.</view> 


WXSS (pages/demo01/view/view.wxss) 文件 代码 如 下 : 


-view parent { 
width: 100%» 
height: 300rpx; 


| Fm i | 了 二 ED | TA | 训 


ss 
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各 重重 重 而 所 hiat 过 


(1) 不 阻止 父 容器 的 view_hover (1) 不 阻止 父 容器 的 view_hover (1) 不 阻止 
我 是 父 客 器 View 我 

我 是 子 容器 view 我 

(2) 阻止 父 容器 的 view_hover (2) 阻止 父 容器 的 view_hover (2) 阻止 
我 是 父 容器 view 我 是 父 容器 view 我 

我 是 子 容器 view 我 是 子 容器 view 

驯 微 信 小 程序 开发 零 基础 人 门 硬币 和信 小 程序 开发 要 基础 入 门 避 微 信 省 
(a) 页 面 初始 效果 (b) 单 击 第 1 组 子 容 器 (c) 单 击 


图 4-1 视图 容 兹 组 件 view 的 简单 应 用 


【代码 说 明 】 

本 示例 在 view.wxml 中 使 用 了 两 组 父子 view 容器 瞬 套 效果 ， 并 在 viev 
定义 它们 的 class 属性 值 为 view parent 和 view_son。 默 认 样 式 效 果 相 同 ，- 
背景 、 宽 100%、 禹 300rpx; 了 于 容 右 均 为 浅黄 包 背 景 、 宽 50%6、 册 150rpx: 
单 击 后 背景 闫 色 更 新 为 红色 效果 。 其 中 第 2 组 子 容 右 设置 了 hover-stop-pro 
击 态 传递 给 祖先 元 素 。 

在 图 4-1 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 两 组 案例 效果 完全 相同 ; 图 (| 
击 第 1、2 组 子 容器 的 效果 。 由 图 4-1 可 见 第 1 组 父子 容器 均 变 为 红色 ， 而 1 
变 为 红色 ， 因 此 hover-stop-propagation 生效 。 


4.2.2 scroll-view 


<scroll-view 二 是 可 深 动 视图 区 域 ， 对 应 的 属性 如 表 4-4 所 示 。 


;由 微 信 小 程序 开发 零 基础 入 门 


ble-back-to-t Bool fl iOS 单 击 顶部 状态 栏 、Android 双击 书 
ENADLIe-DAaCK-LO0-L0 OOLEAD dlSe es ati 
. 顶部 ， 只 支持 竖 问 


bindscrolltoupper 深 动 到 顶部 /左边 会 触发 scrolltoupper . 


bindscrolltolower i 深 动 到 压 部 /右边 会 触发 scrolltolower 


深 动 时 上 友 ， eventdetail = fs 


scrollHelght, scroll Width. deltaX. delta) 
注意 : 在 使 用 坚 向 滚动 时 需要 给 <scroll-view> 一 个 固定 高 度 ， 并 且 闪 
height. 


属 性 名 说 上 明 


【 例 4-2】 视图 容器 组 件 scroll-view 的 简单 应 用 
WXML (pages/demo01/scroll-view/scroll-view.wxml》 的 代码 上 户 段 如 下 : 


<view class='title'>1. 视 图 容器 scrol1-view 的 简单 应 用 </view> 
<View Cass= aqemo 一 DOX > 
<View Class='title'>(1) 纵 回 熏 动 </view> 
Cro -view Serolt yy 
<V1IeEwW class="Scroll-1item-vy'> 和 第 1 贝 </vwiew> 
<VIewW LE 
所 了 TeW class="scroll-item y'> 第 3 贝 </wliew> 
</scroll—-view> 
9. </view> 
10.<view ClLass= qdemo 一 DOoX > 
11. <view class='title'>(2) 横 加 流动 </view> 
12. <SCroll-—view Scroll-—x»> 


下 


[EE <Vl1EeEW class='scroll-item-x'> 第 1 页 </view> 
14. Yl1EW class='scroll-item-x'> 第 2 页 </view> 
二 二 <V1EW class='scroll-item-x'> 第 3 页 </view> 


16. </scroll—view> 
17.</view> 


WXSS (pages/demo01/scroll-view/scroll-view.wxss) 的 代码 片段 如 下 : 


SCroll—view 1 
width: 100%; 
height: 300rpx; 
white—space: NoOwIraps 


TT 


1 


运行 效果 如 图 4-2 所 示 。 
重生 重重 硬 \N/eChat 全 16:36 生生 eChat 全 16:37 
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第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 
1. 视图 容器 scroll-view 的 简单 应 用 1. 视图 容器 scroll-view 的 简 


(1) 纵向 滚动 (1) 纵向 党 动 


肌 2 贝 


(2) 横向 滚动 (2) 权 向 漆 动 


名 微 信 小 程序 开发 零 基 础 入 门 名 微 信 小 程序 开发 零 基 础 入 


(a) 页 面 初 始 效果 (b) scroll-view 滚动 过 程 
图 4-2 ”视图 容器 组 件 scroll-view 的 简单 应 用 

【代码 说 明 】 

本 示例 在 scroll-view wxml 中 设置 了 两 组 <scroll-view> 组 件 ， 分 别 使 上 
scroll-x 定义 其 纵 问 和 横 问 湾 动 。 在 每 组 <scroll-view>= 内 部 均 包 含 3 个 <view: 

在 图 4-2 中 , 图 (9) 为 页 面 初始 效果 ,此 时 都 显示 第 一 个 <view> 的 内 容 ， 
由 该 图 可 见 分别 实 现 了 纵向 和 横 回 深 动 效果 。 
4.2.3 swiper 


<SwWiper> 也 称 为 少 块 视图 容器 ， 讷 龟 使 用 衣 组 件 制 作 约 上 灯 户 切换 播放 
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属 性 名 
duration 
circular 
vertical 

String 1 OpX" 
margin 


display-multiple-items | Nomber |1 


skip-hidden- 

| Boolean false 

item-layout 

bindchange EventHandle ll 


bindanimationfinish EventHandle i 


说 
请 动 动画 时 长 
和 是 否 采 用 衔接 请 动 
请 动 方 回 是 否 为 纵 回 
前 边 距 , 可 用 于 露出 前 一 项 的 
分 ， 接 收 px 和 px 值 
后 边 距 , 可 用 于 露出 后 一 项 的 
分 ， 接 收 px 和 rpx 值 
同时 显示 的 背 块 数量 
是 否 跳 过 未 显示 的 滑 块 布局 
true 可 优化 复杂 情况 下 的 请 烈 
但 会 丢失 隐藏 状 态 请 块 的 布 必 
current 改变 时 触发 change 


event.detall = {current: 


明 


source: source) 
动画 结束 时 触发 animationfi 
件 ，event.detail 同上 


从 1.4.0 开始 ，change 事件 返回 的 detail 中 包含 一 个 source 宁 段 ， 表 二 


可 能 值 如 下 。 
。 autoplay: 目 动 播放 导致 swiper 变化 。 
e touch: 用 户 背 动 引 起 swiper 变化 。 
。 其 他 原因 用 空 字 付 串 表 示 。 
例如 : 


<swiper indicator-dots autoplay></swiper> 


上 述 代码 表示 希望 实现 一 个 市 有 指示 点 的 滑 块 视图 容器 ， 并 且 需 要 目 ; 
这 一 句 代 码 是 不 够 的 ，<swiper> 标 签 必 须 配合 <swiper-item> 组 件 一 起 使 用 ， 


切换 的 具体 内 容 。 


在 <swiper-item> 中 可 以 包含 文本 或 图 片 ， 其 宽 / 高 默认 为 100%。 需 要 ;} 
意 的 是 ，<swiper> 组 件 中 可 以 且 接 放 萤 的 只 有 <swiper-item>> 组 件 ， 人 奋 则 会 - 


致 末 定 义 的 行为 。 
【 例 4-3】 视图 容器 组 件 swiper 的 简单 应 用 
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15.</view> 


WXSS (pages/demo01/swiper/swiper.wxss) 的 代码 上 请 段 如 下 : 


1. .Swiper™ 1itemi 

之 。 height: 300rpx; 

二 line—height: 300rpx; 

4. background—color: lightblue; 
2 font—size: 30pts 

6. } 

1. Swipert 

8. heigqht: 300rpxs 

2 


运行 效果 如 图 4-3 所 示 。 


下 下 下 在 EChiat 全 12.07 生硬 要 要 要 Chat 了 了 
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第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 第 4 
1. 视图 容器 swiper 的 简单 应 用 1. 视图 容器 swiper 的 简单 应 用 1. 视图 容 
使 用 带 文字 的 view 作 为 翻 页 内 容 使 用 带 文字 的 view 作 为 翻 页 内 容 使 用 带 文 5 
第 1 页 第 2 页 | 
-人 -人 

部 三 
局 微 信 小 程序 开发 零 基础 入 门 局 微 信 小 程序 开发 零 基础 入 门 微 信 
(a) swiper 第 1 页 效果 (b) swiper 第 2 页 效果 (c) swir 


4-3 视图 容器 组 件 swiper 的 简单 应 用 
【代码 说 明 】 
本 示例 在 swiperwxml 中 设置 了 一 个 可 以 目 动 播放 的 <swiper> 组 件 , 每 | 
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<-movable-area> 组 件 是 =movable-view>=> 的 可 移动 区 域 范围 ， 其 属性 如 表 


表 4-6 movable-area 组 件 属性 
属性 名 说 明 
a A 当 里 面 的 movable-view 设置 为 文 持 双 指 缩放 时 ， 议 
Wi ”| 可 将 缩放 手势 生效 区 域 修改 为 整个 movable-area 
注意 : movable-area 可 以 自 定 义 width 和 height 属性 ， 其 默认 值 均 为 
<movable-view> 组 件 的 属性 如 表 4-7 所 示 ， 访 组 件 文 持 的 最 低 版 本 为 ] 


表 4-7 movable-view 组 件 属性 


属性 名 | 类 型 说 明 
pre | movable-view 的 移动 方 回 ， 属 性 值 有 all、- 
和 SE horizontal 、none 
inertia movable-view 是 否 市 有 惯性 
out-of-bounds 超过 可 移动 区 域 后 ，movable-view 和 古 否 还 晶 
| 定义 X 轴 方 向 的 偏 移 ， 如 果 x 的 值 不 在 可 
X Number / String 内 ， 会 目 动 移动 到 可 移动 沁 围 ; 改变 x 的 
动 转 
We 定义 Y 轴 方向 的 偏 黎 ， 如 果 y 的 值 不 在 可 
y Number / String 内 ， 会 日 动 移动 到 可 移动 范围 ; 改变 y 的 
动力 
A 阻尼 系数 , 用 于 控制 x 或 改变 时 的 动画 和 
的 动画 ， 值 越 大 移动 越 快 
we 摩擦 系数 , 用 于 控制 惯性 滑动 的 动画 , 值 越 
friction Number 2 越 大 ， 请 动 越 快 停 止 ， 其 人 必须 大 于 0， 否 
置 成 默认 值 
disabled 是 否 禁用 
是 否 文 持 双 指 顷 放 ， 默 认 红 放 手势 生效 |[ 
Sek movable-view 内 
scale-min 定义 缩放 倍数 的 最 小 值 
scale-max |Number | 10 | 定义 缩放 倍数 的 最 大 什 
scale-value Nomber |1 | 定义 缩放 倍数 ， 取 便 范 围 为 0.$ 一 10 
animation 是 否 使 用 动画 


拖 动 过 程 中 触发 的 事件 ，event.detail = {x: 
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(4) 当 movable-view 大 于 movable-area 时 ，movable-view 的 移动 沁 围 
含 movable-area (X 轴 方 回 和 YY 轴 方 同 分 开 考 虑 )。 
【 例 4-4】 视图 容 希 组 件 movable-view 的 简单 应 用 
WXML (pages/demo01/movable-view/movable-view.wxml ) 的 代码 片段 如 


<View class='title'>1l. 视 网 容器 movable-view 的 简 时 应 用 </view> 
<VlIew Class='demo—box'> 
<V1EewWw class='title'>(1)movable-view 在 movable-area 内 </vie 
<movable—area> 
<movable—view id='mv01' direction="'all'></movable—view> 
</movable—-area> 
</view> 
<View Cass= aqemo 一 DoX > 
过 We 全 WW class='title'>(2)movable-view 超出 movable-area</view 
<movable—area> 
<movable—view id='mv02'direction="'all'></movable—view> 
</movable-—-area> 
</view> 
<View Class="'demo—box'> 
<V1ew class='titler>(31 可 缩放 的 movablLe-area</Aview> 
<movable—area scale—area> 
<movable—-view id='mv03' direction='all' scale></movable: 
</movable—-area> 
</view> 


WXSS (pages/demo01/movable-view/movable-view.wxss) 的 代码 片段 # 


movable—-areal 
width: lo50rpxs 
height: To0rpxs 
background—color: lightblues; 
margin: 0 auto,; 

} 

movable—viewt1 
background—color: red; 

} 

#mvO1l1,#mvO31 
width: SOrpxs 
height: oo0rpx; 

} 

#mvO21{ 
width: l80rpx; 
height: l180rpx; 
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(1) movable-view 在 movable-area 内 


(2) movable-view 超 出 movable-area 


(3) 可 缩放 的 movable-area 
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(a) 页 面 初始 效果 
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1. 视图 容 中 movable-viewf 


(1) movable-view 在 movab 
国 “ 


(2) movable-view 超 出 mov. 


(3) 可 缩放 的 movable- 
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(b) 第 1 组 移动 效果 
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(1) movable-view 在 movable-area 内 


(2) mova 一 
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1. 视图 容 吕 movable-view 的 


(1) movable-view 在 movabl 
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4.2.5 cover-vlew 


<cover-view>> 是 可 敌 新 妖 原生 组 件 上 且 文 本 视图 容 避 ， 可 和 窗 兹 的 原 千 
video、canvas、camera、l]ive-player、l]ive-pusher 守 。 其 内 部 只 人 允许 舱 丛 使 
<coveI-imnage> 和 <button>。 访 组 件 的 属性 如 表 4-8 所 示 。 


表 4-8 cover-view 组 件 属性 


属性 名 | 类 型 说 明 


放置 顶部 深 动 俩 移 量 ， 仅 在 设置 了 overflow-y: scroll 成 
scroll-top Number 元 素 后 生效 


注意 : 该 组 件 从 1.4.0 版 本 开始 支持 。 


<cover-image> 征 可 复 关 在 诛 生 组 件 上 的 图 片 视 图 容 郁 ， 可 黎 
<cover-View> 相 同 。 该 组件 可 以 直接 使 用 或 被 仙 父 在 <cover-view> 中 ， 其 属 


表 4-9 ”cover-image 组 件 属 性 


属性 名 | 类 型 _ 说 。 明 


| z 图 标 路 径 , 支持 临时 路 径 . 网 络 地 址 (从 1.60 版 本 开始 
ee 暂 不 支持 base64 格式 


bindload 图 片 加 载 成 功 时 触发 


pindenor 让 加 加 关 夏 时 外 


注意 : 该 组 件 也 从 1.4.0 版 本 开始 支持 。 


【 例 4-S】 视图 容 希 组 件 cover-view 的 简单 应 用 
WXML (pages/demo01/cover-vVlewy/cover-vViewwWXxml) 的 代码 卢 段 如 下 : 


. <view class'title'>1. 视 图 容器 cover-view 的 简单 应 用 < /view> 
。<VLew Class='demo—box'> 
<View class='title'> 在 地 图 上 放置 cover-view</view> 
<map> 
<COVEIr—VIeW> 
<Cover-view>Cover-View</cover—-view> 
<COVer-image src='/images/demo0l1/house.png'></cover-in 
<button type='"pPprimary'" Size©~='"mini'’ > 这 是 按 特 </button> 
</COver—vyview> 


中] 
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li width: 1l00rpx» 
12 Berght: LO0rps 
13- margin: 0 autos 
14.)} 


运行 效果 如 图 4-5 所 示 。 
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图 4-5 视图 容 兹 组 件 cover-view 的 简单 应 用 


【代码 说 明 】 

本 示例 在 cover-view.wxml 中 放置 了 一 个 <map> 组 件 用 于 显示 默认 地 图 
放置 了 一 个 <cover-view> 用 于 履 盖 在 地 图 上 方 。 在 这 个 <cover-view> 内 部 放 
<cover-image> 和 <button> 组 件 ， 分别 用 于 显示 目 定 义 内 容 的 文本 、 图 片 和 揽 
可 见 ，<cover-view> 所 包 侣 的 内 容 可 以 复 兰 在 <map> 组 件 上 方正 确 显 示 。 


4.3.1 lcon 
<icon> 为 图 标 组 件 , 开发 者 可 以 目 定 义 其 类 型 、 大 小 和 闫 色 。, 该 组 件 对 | 
所 示 。 
表 4-11 icon 组 件 属性 


属 性 名 
ype 图 标的 类 
size 图 标的 大 
color 图 标的 颜 


不 同 type 属性 值 对 应 的 样式 ， 如 表 4-12 所 示 。 
表 4-12 icon 组 件 的 type 属性 值 对 应 的 样式 


type 属性 值 图 标 样式 说 明 

pe 成 功 图 标 ， 用 于 表示 操作 顺利 完成 ， 也 出 现在 多 选 控 人 
ou。 | ”| 不 带 圆圈 样式 的 成 功 图 标 , 用 于 表示 操作 顺利 完成 , 也 

slCCeESS-DO-ClTCle 表示 已 经 选 中 


info 提示 图 标 ， 用 于 表示 信息 提示 


i -6 警告 图 标 ， 用 于 提醒 需要 注意 的 事件 
wi 等 待 图 标 ， 用 于 表示 事务 正在 处 理 中 
i 取消 图 标 ， 用 于 表示 关闭 或 取消 
download 下 载 图 标 ， 用 于 表示 可 以 下 载 


th ~ OQ 搜索 图 标 ， 用 于 表示 可 搜索 
clear 3 。 | 清空 图 标 ， 用 于 表示 清除 内 容 


例如 声明 一 个 红色 、40 像 系 大 小 的 管 告 图 标 ，WXML 代码 如 下 : 
<icon type="warn” 3S1ze="40” color—"red™></icon> 
如 条 有 多 个 图 标 需 要 批量 生成 ， 可 以 事先 在 对 应 的 JS 文件 中 用 data- 


WXML 文件 中 配合 使 用 <blocl 标 签 。 
全 [起 依 关 和 成 杂 昔 著 鱼 的 位 自 贺 标 WwwrT 位 生 丰 下 . 
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【 例 4-6】 基础 内 容 组 件 icon 的 简单 应 用 
WXMI (pages/demo02/icon/icon wxml) 的 代码 片段 如 下 : 


1. <view class='title'>2 .基础 组 件 icon 的 简单 应 用 </view> 
2. <View Class='demo—box'> 

3 <view class='"'title'>(1) 内容 的 他 化 </view> 

i <block wx:for="{{iconType}}'> 

Ee <icon type="{{item}}" size='36" /> 

6. </block> 

1. </view> 

8. <View Class="'demo—box'> 

sr <Vliew Class='title'> (2) 闫 色 的 变化 </view> 

10 <block wx:for~="{{iconColor}t}"> 

11 <icon tvpe="info™ color="{{item}}™ size='36" /3 
| 之 </block> 

13.</vVview> 

14.<view Class="'demo—box'> 

1 <V1iew class='title'>(3) 大 小 的 变化 </view> 

16 <block wx:for="{{iconSize}}"> 

i <icon type="info™ size="{{item}}™" /> 

18 </block> 

19.</view> 


JS (pages/demo02/icon/icon.js) 的 代码 上 请 段 如 下 : 


1 Page l(t 
je data: 1{ 
站 CoONnTYype: | SCCESS yy “SUCCeSS TO CirCLle ys "nfo yy. war 


‘cancel', ‘download’', "search'", ‘clear'l|, 


是 iconColor: [ Ted ， orange Yellow ， Green rr CYyan rr blue 
人 iCONSizZe: [20,.25.,30,.35, 40.,45,501 
6. }, 


运行 效果 如 图 4-6 所 示 。 
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【代码 说 明 】 

本 示例 在 icon.js 的 data 中 设置 了 3 个 数组 ， 即 iconType、iconColor、 
于 记录 图 标的 类 型 、 图 标的 颜色 和 图 标的 大 小 ;在 icon wxml 中 使 用 <blod 
人 循环 实现 批量 生成 多 个 标签 组 件 的 效果 。 由 图 4-6 可 见 ， 图 标的 类 型 、 闫 1 
由 变化 。 
4.3.2 text 

text 为 文本 组 件 ， 育 组 件 对 应 的 属性 如 表 4-13 所 示 。 

表 4-13 text 组 件 属 性 


局 性 


space 显示 连续 空格 


decode 
例如 生成 一 个 内 容 可 选 的 文本 组 件 ， 代 码 如 下 : 


<text selectable> 这 一 段 测 试 文本 </text> 


space 属性 值 的 具体 介绍 如 表 4-14 所 示 。 
表 4-14 text 组 件 的 space 属性 值 


值 说 有明 
ensp 中 文人 字符 空格 一 半 大 小 
emsp 中 文学 村 空格 大 小 
nbsp 根据 字体 设置 的 空格 大 小 


注意 事项 如 下 : 

(1 ) decode 可 以 解析 的 有 &nbsp:、&&lt:、 区 gt: 、&amp:、 允 apos;、 久 ens 
(2) 各 个 操作 系统 的 空格 标准 并 不 一 致 。 

(3) <text> 组 件 内 只 支持 <text> 舱 套 。 

(4) 除了 文本 节点 以 外 的 其 他 节操 部 无 法 长 按 选 中 。 

【 例 4-7】 基础 内 容 组 件 text 的 简单 应 用 

WXMI (pages/demo02/textbtextwxml) 的 代码 片段 如 下 : 
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[让 <text> 无 法 解析 &nbsp; glt; &at; &amp; tapPpos; &ensp; &emsps? 人 <, 
1l6. <text decode> 可 以 解析 gnbsp; tglt; &aqt; tamp; &apos; &ensp; ， 
17.</view> 


下 


WXSS (pages/demo02/text/text.wxss) 的 代码 如 下 : 


texxt 
margin: lorpxs 
Padding: Jorpx; 
border: lrpx Solid silver; 
displavy: block; 
font—size: lOpt; 


mm 


运行 效果 如 图 4-7 所 示 。 
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这 是 一 段 长 按 可 以 选择 的 文本 内 容 ， 


(2) 空格 显示 形式 
这 段 代码 不 允许 连续 显示 空格 。 
这 肌 代 码 。。 中 文字 符 空格 一 半 大 小 。 
这 段 代码 中 文字 符 空格 大 小 。 


这 段 代码 ”根据 字体 设置 的 空格 大 小 


(3) 文本 解码 


无 法 解析 &nbsp;: &lt; &gt; &amp; &apos; 
Qensp; &emsp; 


可 以 解析 < >&&， 
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2. 基础 组 件 text 的 篇 
™ (1) 文本 可 选 


这 是 过关 长 按 可 以 选择 的 》 


(2) 空格 显示 形 

这 段 代码 不 允许 连续 显 ; 
这 段 代 码 中 文字 符 空格 
这 段 代码 中 文字 符 


这 段 代 码 ”根据 


(3) 文本 解码 


无 法 解析 &nbsp; &lt; &gt; && 
&ensp; &emsp 


可 以 解析 < > 良 ， 
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4.3.3 rich-text 
<rich-text> 为 富 文 本 组 件 ， 该 组 件 对 应 的 属性 如 表 4-15 所 示 。 


表 4-15 rich-text 组 件 属性 


注意 : 该 组 件 由 基础 库 1.4.0 开始 支持 ， 低 版 本 需要 做 兼容 处 理 。 


节点 列表 /HTML Stri 


例如 在 WXML 中 声明 一 个 曙 文 本 组 件 ， 代 码 如 下 : 


<Tich-text nodes='{{nodes}}'></rich—text> 


其 中 {fnodes}} 为 自 定义 名 称 的 变量 ， 用 于 定义 HIML 内 容 。 
如 果 是 用 纯 字 符 串 (String 类 型 ) 描述 HTML 代码 ， 在 JS 中 表示 如 下 


Page ({ 
data: I 
nodes: <div style=" lne height: 60px; Color: red;" >Hellc 
} 
}) 


i 


上 述 代码 表示 声明 一 个 <div> 元 素 ， 里 面 的 文字 内 容 是 “Hello World!” 
高 为 60 像素 (HTML 不 支持 tpx 单位 ， 如 果 使 用 会 无 效 )、 字 体 为 红色 。 其 
所 示 。 


Hello World! 


图 4-8 基础 内 容 组 件 rich-text 的 简单 应 用 


需要 注音 的 是 ， 官 方 声明 nodes 属性 推荐 使 用 Array 关 型 ， 这 是 由 于 忆 
String 类 型 转换 为 Array 类 型 ， 所 以 在 内 容 比较 多 的 时 候 性 能 会 有 所 下 降 。 
Array 类 型 目前 支持 两 种 节点 ， 分 别 为 元 素 节 点 (node)〉 和 文本 节点 


tH. | 1 -Ei 了 
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文本 方太 
当 type='text 时 为 文本 证 点 效 末 ， 相 天 属性 如 表 4-17 所 示 。 


表 4-17 文本 节点 (type='text') 属性 


注意 : 文本 节点 不 支持 样式 效果 ， 只 用 于 显示 纯 文本 内 容 ， 但 可 以 
使 用 。 


内 此 ， 上 面 的 例子 可 以 重新 用 数组 (Array 类 型 ) 描述 ， 将 JS 代码 改 : 


二 二 Page ll 

Ss data: 1{ 

二 nodes 医 | 

4. name 和 和 天 二 

< attrs { 

6. style: "line—height: 60px; COlor: Fed 
1. } 

8. children: |{ 

i type: "text", 

工 从 。 text: "Hello Worldl!" 
11. } ] 

12. a 

ee. 

14.1]) 


这 里 将 元 系 廊 上 尽 与 文本 方 扩 配 合 使 用 ,使 用 元 系 市 扩 的 attrs 属性 声明 
上 尽 的 text 属性 声明 文字 内 容 ， 其 运行 结果 与 改 与 前 完全 一 样 。 需 要 注意 的 ; 
文 持 class 和 style 属性 ， 但 不 文 持 id 属性 。 

上 面 的 示例 使 用 了 HIML 中 的 div 元 系 ， 队 此 之 外 还 有 和 2 个 HTML 
别 。 光 信任 的 HIML 市 点 及 其 属性 如 表 4-18 所 示 。 


表 4-18 受信 任 的 HTML 市 点 及 其 属性 


受信 任 的 节点 居 
a 
abbr 


b 


= CU To 搬 
和 a 


{OY 第 


tr 
| 笠 体 字 


受信 任 的 节点 LE 
ER 
img alt、 sre, heig 


hh 
司 
J 


ins 
label 
legend fieldset 元 系 的 标题 

li 列表 的 项 目 


ol 有 订 列 表 start、type 


. 
q 短 的 引用 


span 文本 区 域 ， 文 档 中 的 节 
strong 粗 体 字 ， 强 调 文 本 


td 表格 中 的 单元 格 colspan、heig 
tfoot 表格 中 的 脚注 内 容 
th 表格 中 的 表 头 单元 格 colspan、heig 
thead 表格 中 的 表 头 内 容 


tr 表格 中 的 行 
ul 无 序列 表 


【 例 4-8】 基础 内 容 组 件 rich-text 的 简单 应 用 
WXMIL (pages/demo02/rich-textrich-text.wxzml) 的 代码 片段 如 下 : 


- <Vlilew Class='title'»>2?. 基础 组 件 rich— text 的 简单 应 用 < /view> 
. <V1ilew Class='demo—box'> 


<view Class—="title >({1) TiO 系 节 扩 《 恒 用 BEV1Ie 和 样式) 二/VIEWS> 
<rich-text nodes='{{nodes01}}'></rich-—text> 


. </view> 
. 过 WEW Class='demo—box'> 


<View Class='title'> (2) 元 素 节 点 (使 用 class 样式 ) </view> 


微 信 小 程序 开发 零 基础 入 门 “ 世 jy 


人 children: | 1!{ 

= tye- text 

10. text: "Helle WoOrldt' 

于 至 } | 

12. }] ， 

EE 当 nodes02: [I1 

于 这 name: ‘div', 

15. attrs: 1 

于 站 Ss qlee 

二 了 }, 

18. children: [1 

1 type: "text", 

2 text: Hello World!! 

21. } | 

Ee }], 

2 nodes03: <div style=" "line~height: 60px; color: red:;font— 
Hello Worldl</div>" 

2 


WXSS (pages/demo02/rich-text/rich-text.wxss) 的 代码 如 下 : 


-myStylel 
OlOr: Ted; 
line—height: e600px; 
font—weight: bold; 
} 


ni 


运行 效果 如 图 4-9 所 示 。 


重量 看 重重 WEChat 过 17:10 100% [于] 
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2. 基础 组 件 rich-text 的 简单 应 用 


(1) 元 素 市 点 (使 用 style 样 式 ) 


Hello World! 


(2) 元 紊 节 吕 (使 用 class 样 式 ) 


Hello World! 
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【代码 说 明 】 

本 示例 在 rich-text.wxml 中 放置 了 3 组 案例 , 即 元 素 节点 (使 用 style 样 
用 class 样式 ) 和 文本 节点 ， 均 用 于 实现 同一 种 元 素 样 式 (<div> 元 素 、 行 志 
和 粗 字 体 )。 

其 中 ， 第 1 组 在 JS 中 使 用 style 属性 实现 元 素 样式 ; 第 2 组 在 JS 中 俐 
义 myStyle 元 素 样式 ， 并 且 在 WXSS 中 对 myStyle 进行 完善 ;， 第 3 组 直接 
现 元 系 样 式 。 

由 图 4-9 可 见 ， 这 3 种 不 同 的 表述 方式 可 以 实现 完全 一 样 的 运行 效果 。 


4.3.4 progress 
progress 为 进度 条 组 件 ， 该 组 件 对 应 的 属性 如 表 4-19 所 示 。 


表 4-19 progress 组 件 属性 

属 性 名 说 明 
percent 百分比 0 一 100 
show-info 在 进度 条 右 侧 显示 百分比 
stroke-width 一 进度 条 线 的 宽度 ， 单 位 为 px 
color 进度 条 的 颜色 (请 使 用 activeColor) 
activeColor Coor | 己 选 择 的 进度 条 的 颜色 
backeroundColor Do 未 选择 的 进度 条 的 颜色 
active 进度 条 从 左 往 右 的 动画 
active-mode String backwards pp na 和 

上 座 结 束 点 接 看 播放 


例如 声明 一 个 目前 正 处 于 80% 刻 度 ， 并 且 宽 20px 的 进度 条 组 件 ，WX 


<progress percent="80™ stroke-width="20"/ > 


【 例 4-9】 基础 内 容 组 件 progress 的 简单 应 用 
WXMI (pages/demo02/progress/progress.Wxml) 的 代码 卢 段 如 下 : 


. <View class='title'>2- 基 础 组 件 Progress 的 简单 应 用 < /view> 
. <View Class='demo—box'> 
<view class'title'>(1) 进度 条 布 侧 显 示 白 分 比 </view> 


<progress percent='25' show-info /> 


| 搬 
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2. 基础 组 件 progress 的 简单 应 用 
(1) 进 度 条 右 侧 显 示 百 分 比 


(2) 线 条 宽度 为 20px 的 进度 条 


(3) 目 定义 颜色 的 进度 条 


(4) 带 有 动画 效果 的 进度 条 
@ 微 信 小 程序 开发 零 基 础 入 门 


4-10 基础 内 容 组 件 progress 的 简单 应 用 


【代码 说 明 】 

本 示例 依次 列举 了 4 种 进度 条 的 情况 ， 即 进度 条 右 侧 显 示 百 分 比 、 线 
进度 条 、 自 定义 颜色 的 进度 条 、 融 有 动画 效果 的 进度 条 。 需 要 注意 的 机 
activeColor 属性 来 目 定 义 进 度 条 的 选中 颜色 ， 单 独 使 用 color 属性 将 无 效 。 


a z 


表 早 组 件 主要 有 10 种 ， 如 表 4-20 所 示 。 
表 4-20 ”表单 组 件 
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4.4.1 button 
<button> 为 按钮 组 件 ， 访 组 件 对 应 的 第 用 属性 如 表 4-21 所 示 。 
表 4-21 button 组 件 的 常用 属性 


属性 名 | 类 型 说 明 

size 按钮 的 大 小 

type String 按钮 的 样式 类 型 

plain 按钮 是 否 铂 空 ， 背 景色 透明 

disabled 是 否 禁 用 

loading 名 称 前 是 否 市 loading 图 标 

ee se | 用 于 <formm> 组 件 , 单 击 分 别 会 触发 <form> 
submit/reset 事件 

open-type String -eg 短信 开放 能 力 

hover-class ee A 
时 ， 没 有 单 击 态 效 采 

Ts 指定 是 否 阻止 本 节点 的 祖先 节点 出 现 单 赴 

propagation 

hover-start-time 按 住 后 多 从 出 现 单 击 态 ， 单 位 为 ms 

hover-stay-time 手指 松 开 后 单 击 态 保留 的 时 间 ， 单 位 为 


注意 : hover-class 的 属性 值 button-hover 默认 为 {background-colo 
opaclty: 0.7:} 。 


size 属性 的 有 效 人 如 下 。 

。 default: 默认 值 ， 按 钮 宽度 与 手机 屏幕 宽度 相同 。 

e mini: 迷你 型 按钮 ， 按 钮 扩 寸 、 字 号 都 比 普通 近 钮 小 。 
例如 : 


1 . <button size='default'> 普 授 按 钮 </button> 
2 。<button size='mini> 迷 你 按钮 /button> 


其 效果 如 图 4-11 所 示 。 


Eric 和 = 人 
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1]. <button 七 YPe= PEIImarYy >primary 按钮 </button> 
2. <button type="'default ">default 按钮 </button> 
3. <button type-'warn'>warn 按钮 </button> 


其 效 采 如 图 4-12 所 示 。 


defaul|t 按 徊 


warn 按 钮 


图 4-12 ”表单 组 件 button 的 type 属性 的 简单 应 用 


form-type 属性 的 有 效 值 如 下 。 
e submit: 所 交 表 早 。 

e reset: 车 置 表单 。 

例如 : 


1]. <button form-type="submit"' > 提交 按钮 </button> 
2. <button form-— type="'reset'’ > 重 置 按钮 </button> 


其 效果 如 图 4-13 所 示 。 


图 4-13 ”表单 组 件 button 的 form-type 属性 的 简单 应 用 


斋 要 注意 的 是 ， 这 两 球 按 钮 目前 只 所 供 了 页面 样式 效果 ， 具 体 功 能 十: 
一 起 使 用 才 可 生效 ， 评 见 4.4.5 -nm。 
open-type 属性 的 有 效 值 如 表 4-22 所 示 。 
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表 4-23 所 示 。 


表 4-23 ”button 组 件 的 open-type 相关 属性 


属性 名 | 类 型 | 说明 


指定 返回 用 户 信息 的 语言 , zh_CN 为 简体 


lang String 中 文 , zh_TW 为 繁体 中 文 ，en 为 天 文 。 其 
扒 认 信 为 em 


用 户 单 击 该 按钮 时 会 返回 获取 到 的 用 户 信 
bind getuserinfo 息 ， 回 调 的 detail 数据 与 wx.getUserInfo0 返 


回 的 一 致 


session-from 会 话 来 源 


会 话 内 消息 卡片 的 标题 ， 默 认 值 为 当前 


send-message-title | String 


标题 
send-message- Ne 会 话 内 消 垦 卡片 单 击 时 跳 转 的 小 程 夺 足 
path ” “| 径 ， 默 认 值 为 当前 分 享 路 径 
send-messace- | \ 
Ee 9 String ” “| 会 话 内 消息 卡片 的 图 片 ， 默 认 值 为 截图 
nn Boolean ”| 显示 会 话 内 消息 卡片 ， 默 认 值 为 false 
-CAT 
bindcontact Handler 客服 消 且 回调 


bindgetphonenumber | Handler 获取 用 户 手 机 号 回调 


打开 App 时 问 App 传递 的 参数 


app-parameter String 
当 使 用 开放 能 力 时 发 生 错 误 时 回调 


binderror Handler 


bindopen setting Handler ”| 在 打开 授权 设置 页 后 回调 


【 例 4-10】 表单 组 件 button 的 简单 应 用 
WXML (pages/demo03/button/button.wxml) 的 代码 片段 如 下 


1. <view Class='title'»3 . 表 时 组件 button 的 简单 应 用 < /view> 
2.,. <VIEW Class="'demo—box'» 


生效 日 


open-type= 
"getUserm 


open-type= 
"getUserm 


open-type= 
“Contact 

open-type= 
“Contact 

open-type= 
“Contact 

open-type= 
“Contact 

open-type= 
“Contact 

open-type= 
“Contact 

open-type= 
"getPhonel 
open-type= 
"launchAp 
open-type= 
"launchAp 
open-type= 
"opensettll 


下 微 信 小 程序 开发 零 基 础 入 门 “站 kr 


点 我 试 试 </button> 


1 了 .过 /View> 


JS (pages/demo03/button/button.js 〉 的 代码 片段 如 下 : 


Page (| 
GetUserDetaril: fanctionl(e) 1 
console.log(e.detalil .userInfo) 
} 
}) 


i 


WXSS (pages/demo03/button/button.wxss) 的 代码 如 下 : 


1. buttont 
margin:10rpx; 


[5 


运行 效果 如 图 4-14 所 示 。 


看 看 要 重重 eChat 全 17:59 
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3. 表单 组 件 button 的 简单 应 用 


(1) 迷你 按钮 


要 


(2) 按钮 状态 
首 通 按钮 


:加 载 按 钮 


(3) 按钮 单 击 监听 
点 我 试 试 
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loading 属性 实现 按钮 禁用 和 加 载 动画 效果 ;第 3 组 为 按钮 追加 了 open-type= 
然后 使 用 了 目 定 义 图 数 getUserDetail0 获 取 用 户 信 息 。 在 button.js 中 设置 J 
数 的 具体 内 容 ， 即 将 获得 的 微 信 用 户 信息 打印 输出 到 Console 控制 台中。 


边 


企图 4-14 中 ， 图 (的 十 页 面 初 始 效 朱 ， 其 中 第 2 组 中 的 loading 属性 会 
形成 一 个 加 载 深 动 的 动画 效果 图 标 ;， 图 (b) 为 早 击 了 第 3 组 中 的 按钮 后 的 


getUserDetail0 国 数 ， 并 且 在 Console 控制 台 打 印 输出 当前 的 微 信 用 户 信 息 ， 


4. 


A 


Dn 


称 、 性 别 、 所 在 省 市 等 内 容 。 
4.2 checkbox 


<checkbox> 为 多 选项 目 组 件 ， 人 往往 需要 与 <checkbox-group> 多 项 选择 ; 
中 <checkbox-group> 首 尾 标签 之 间 可 以 包含 若干 个 <checkbox> 组 件 。 
<checkbox-group> 组 件 只 有 一 个 属性 ， 如 表 4-24 所 示 。 


表 4-24 <checkbox-group> 组 件 属性 
Wn | 当 内 部 <checkbox> 组 件 选 中 与 | 携 市 值 为 event.d 
bindchange | EventHandle | 否 发 生 改 变 时 触发 change 事件 | checkbox 组 件 va 


<checkbox> 组 件 的 属性 如 表 4-25 所 示 。 


表 4-25 <checkbox> 组 件 属 性 


属性 名 称 备 


wl 组 件 所 携带 的 标识 值 
checked 是 否 选 中 该 组 件 其 默认 值 为 false 
disabled 是 否 禁用 该 组 件 其 默认 值 为 false 
color Color 组 件 的 颜色 与 css 中 的 color 


例如 : 


- <Checkbox—gqroup> 

<Checkbox value="apple" checked /> 苹果 
<checkbox value='banana' disabled /> 理 焦 
<Checkbox value="grape'" /> 多 多 

<checkbox value='lemon' /> 森 标 

. </checkbox—-group> 
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-. <Vlew Class='title'>3. 表单 组 件 checkbox 的 简单 应 用 < /view> 
。<VLIeEeW Class='demo—box'»> 


<view class='title'> 使 用 数组 批量 生成 选项 </Vview> 
<Checkbox—-group bindchange="checkboxChange'> 
<vliew Class='test" wx:for="{{checkboxItems}}" wx: key= "1i 
<Checkbox value='"'{{item.valuel}}' checked="'|{{item.checkedtlt}' 
</view> 
</checkbox—-group> 


. </view> 


JS (pages/demo03/checkbox/checkbox.js) 的 代码 上 请 段 如 下 : 


Page (1{ 
data: I 
checkboxItems: | 
{ name: "于 果 '， value: apple ”上 
{ name: ' 棕 子 '， value: orange'y checked: true" |}, 
{ name: rR value: “ Pear” }, 
{ name: ' 卫 各"'， value: ‘strawberry" }, 
{ name: " 得 和 念 ' : Vvalue: "bpanana }, 
{ name: 1" 镁 欧 auUe: "grape™ }, 
] 
}, 
checkboxChange:function(e) 1{ 
console.1log("checkbox 发 生变 化 ， 被 选中 的 值 是 : '+ e.detail.va 
} 
}) 
运行 效果 如 图 4-16 所 示 。 
重量 重量 NeChat 全 10:02 TTTTEM 全 10:04 
例题 DEMO 例题 DEMO 
第 4 草 小 程序 组 件 第 4 章 小 程序 
3. 表单 组 件 checkbox 的 简单 应 用 3. 表单 组 件 checkbow 交 
使 用 数组 批量 生成 选项 使 用 数组 批量 生成 
苹果 苹果 
ww 梅子 v 橙子 
梨子 梨子 
草莓 v | 草莓 
香 焦 香 焦 


葡萄 葡萄 
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OQ | top | Filter D 
checkbox 发 生变 化 ， 被 选中 的 值 是 : orange,strawberry 
》 
(c) 多 个 选项 被 选中 时 Console 输出 的 内 容 
4-16 《〈《 续 ) 
【代码 说 明 】 


在 checkbox.js 的 data 中 设置 了 一 个 数组 checkboxJItems， 用 于 记忆 
(name)、 值 Cvalue) 以 及 初始 的 选中 状态 Cchecked ) 。 在 checkbox.wxml 中 使 用 
标签 形成 多 选 组 ， 并 在 其 内 部 使 用 <view>= 标 签 配合 wx:for 循环 实现 批量 名 
组 件 的 效果 。 

为 达到 监听 选项 改变 的 目的 ， 在 <checkbox-group> 标 签 上 添加 属性 bi 
全 checkboxChange 为 日 定义 负数 名 称 。 人 然后 在 checkbox.js 中 仍 加 该 函数 | 
次 被 佣 发 部 在 Console 控制 台 打 印 和 输出 最 新 选中 的 所 有 但 。 

在 图 4-16 中 ,由 图 (a) 可 见 页 面 初始 显示 效果 成 功 识 别 了 选项 的 名 称 和 |; 
子 ” 选 项 为 选中 效果 ); 由 图 (b) 可 见 允 许 手 动 进行 多 选 ; 图 (c) 为 Console 把 
由 设 图 可 见 当 选项 被 改变 时 会 日 动 输出 所 有 人 被 选中 的 值 。 


4.4.3 nput 
<input> 为 输入 框 组 件 ， 其 属性 如 表 4-26 所 示 。 
表 4-26 <input> 组 件 属性 


属性 多 一 
alte ”|smng | ” | 辆 入 杠 的 袍 贡 内 容 
sp pat 的 类 型 


微 信 小 程序 开发 零 基础 入 门 


= 说 明 


confirm-type "done" 设置 键盘 右 下 角 按 钮 的 文字 (最 低 版 


= 3 TH 是否 持 
sess oo 


cursor 和 指定 focus 时 的 光标 位 置 〈 最 低 版 本 ; 
WE 光标 的 起 始 位 置 , 在 自动 聚集 时 有 效 ， 
和 人 搭配 使 用 (最 低 版 本 为 1.9.0) 


selection-end |Number 苑 标的 结束 位 置 , 在 目 动 彩 集 时 有 效 ， 
z 搭配 使 用 (最 低 版 本 为 1.9.0) 


adjust-position 人 攻 -一 一 键盘 弹 起 时 是 售 目 动 上 推 页 面 〈 了 最 低 


键盘 输入 时 触发 ，event.detail = {valw 
bindinput EventHandle keyCode 为 键 信 ， 从 2.1.0 版 本 起 文 持 
返回 一 个 字符 串 ， 将 但 换 输入 框 的 内 


| 入 框 聚 焦 时 触发 ，eventdetail = {vi 
memes Emma 为 键盘 高 度 ， 从 基础 库 1.9.90 起 支持 


pindconfm | Eventtadle| | 单 下 “完成 ” 接 和 时 朋 用 ，eAenLdea 


type 属性 的 有 效 信 如 下 。 
e text: 文本 输入 键盘 。 
。 number: 数字 输入 键盘 。 
e idcard: 号 份 证 输入 键盘 。 
。 digit: 市 小 数 氮 的 数字 键盘 。 
例如 : 
. <input type='text" /> 
. <input type='number' /> 


-<input type='idcard " /> 
-<input type="'digit" /> 


a 


其 效果 如 图 4-17 所 示 。 

在 图 4-17 中 , 图 (a) 为 type='text 的 键盘 效果 , 此 时 是 文本 输入 画面 ; 图 ( 
的 键盘 效果 ， 此 时 是 纯 数字 0 一 9， 不 带 有 小 数 点 的 ， 图 (@) 为 type='idcar 
时 是 文本 输入 画面， 图 (gd) 为 type='digit 的 键盘 效果 ， 此 时 是 纯 数 字 0 一 9， 
符号 。 


LE Lu fo 请 
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(c) <input type='idcard 人 > 键盘 效果 (d) <input type='digit 
图 4-17 《〈 续 ) 


confirm-type 属性 的 有 效 全 如 下 。 
。 send: 右 下 角 妙 示 “ 有 太 达 ”按钮 。 
。 search: 右 下 角 显 示 “ 搜 索 ” 按 钮 。 
。 next: 右 下 角 旺 示 “ 下 一 个 ”按钮 。 
。 go: 右 下 角 显示 “前 往 ” 按 钮 。 
。 done: 右 下 角 显 示 “ 完 成 ” 近 钮 。 
例如 : 
- <input CODEirnm-tYPe= Send /> 
. <input confirm-type='search" /> 
- <input confirmtype='next" /> 


- <input confirm-—type~='go" /> 
. <input confirm- type='done"' /> 


其 效果 如 图 4-18 所 示 。 
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(e) <input confirm-type='done> 键 盘 效 果 


图 4-18 〈 续 ) 


由 图 4-18 可 见 ，confirm-type 属性 的 不 同 值 会 导致 输入 键盘 右 下 角 的 : 


要 注意 的 是 ， 放 属 性 的 最 终 表 现 与 手机 输入 法 本 里 的 实现 有 大， 部 分 Andi 
和 第 三 方 答 入 法 可 能 不 文 持 或 不 完全 文 持 。 


‘ID 


记 广 广 己 记 记 
eh 


= 
一 


【 例 4-12 】 表 时 组件 input 的 简单 应 用 
WXMIL (pages/demo03/inputinput.wxml) 的 代码 片段 如 下 : 


. <view class='title7>3- 表 单 组 件 input 的 简单 应 用 </view> 


. < leW Class='demo—box'> 


<View Class='title'>(1) 窗 公 输 入 杠 </view> 
<input password blaceholder=' 请 和 输入 密码 ， 人 六 


. </view> 


. 过 WEW Class='demo—box'> 


<view class='"'title'>(2) 最 大 字符 长 度 限制 为 10</view> 
<lnput type="'text’' maxlength="10" placeholder=" 这 里 最 多 只 能 


</view> 


.<Vliew Class='demo—box'> 


<view class='title'>(3) 禁用 输入 杠 </view> 
<input disabled placeholder=' 访 输入 框 己 被 蔡 用 ' /> 


.</view> 


.<Vlew Class='demo—box'> 


<Vliew Class='title'>(4) 目 定 义 placeholder 样式 </view> 
<1input placeholder—style="color:red;font—weight:bold" Pa 
义 样式 ' /> 


.</view> 


该 输入 框 已 被 禁用 | 


4) 自 定义 placeholder 样 式 
自 定义 样式 


(5) 输入 框 事件 监听 
这 里 输入 内 容 将 被 监听 
@ 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初始 状态 


{OY 第 


console.1log(" getInput 触发 ， 输 入 杠 内 容 发 生 改 变 ， 当 前 值 为 : "+e. 
1. } 
0 
运行 效果 如 图 4-19 所 示 。 
TTTTEa = 17:33 % [i) 本 覃 硬 本 三 WEChat 全 1/:31 
例 古 DEMO 例题 DEMO 
第 4 章 小 程序 组 件 第 4 章 小 程序 
3. 表单 组 件 input 的 简单 应 用 3. 表单 组 件 input 的 1 
(1) 密码 输入 框 (1) 密码 输入 
请 输入 密码 “0 
(2) ae 10 (2) 最 大 字符 长 度 限 
| 能 输入 10 个 字 索 贰 会 肆 伍 陆 沉 撒 
(3) 禁用 输入 框 (3) 禁用 输入 


] 及 输入 框 已 入 和 
(4) 目 定 义 placehol 
目 定 义 桩 式 


5) 输入 框 事 件 ! 


abc 


台 微 信 小 程序 开发 雪 二 


(b) 分 别 输入 内 


[kK Console Sources 
G top 


bd 


Network 


Security Audits Storage 


Filter 
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password、maxlength、disabled 和 placeholder-style 属性 实现 效果 。 第 S$ 组 人 
bindblur 属性 分 别 绑 定 输入 事件 和 失去 焦点 事件 ， 在 inputjs 中 对 应 的 自 定 
和 getInput()。 


4.4.4 label 


<labe|> 标 丛 用 来 改进 表 早 组 件 的 可 用 性 ， 使 用 for 属性 找到 对 应 的 id 


该 标 丛 下 ， 单 击 时 会 触 肥 对 应 的 控件 。 该 组 件 对 应 的 属性 如 表 4-27 所 示 。 


民 La 请 


HL To 请 


表 4-27 <label> 组 件 属性 


注意 : 目前 可 以 绑 定 的 控件 有 <button>、<checkbox>、<radio>、<swi 


这 里 以 多 选 杠 <checkbox> 为 例 ， 使 用 <label> 标 谷 的 for 属性 的 代 但 如 


<cCheckbox—-group> 
<checkbox id="'apple’' Value='applLe' checked /> 
<label for='apple'> 苹 果 </label> 


. </checkbox—-group> 


用 户 也 可 以 将 <checkbox= 组 件 直 接 放 在 <label= 内 : 


<Checkbox—group> 
<label> 
<Checkbox value="apple" checked /> 华 果 
</label> 


. </checkbox—-group> 


上 述 两 种 做 法 的 效果 完全 相同 ， 当 用 户 单 击 文字 内容 时 束 会 目 动 选中 ; 


应 的 控件 。 


再 有 要 注 意 的 征 ，for 的 优先 级 局 于 内 部 控件 ， 当 内 部 有 多 个 控件 的 时 候 ; 


认 触 发 第 一 个 控件 。 


| 


【 例 4-13】 表 时 组件 label 的 简 蛙 应 用 
WXML 的 代码 片段 如 下 : 


i | Te a 


1l3. <checkbox—group> 

16. <1label> 

LR <checkbox value='apple' checked /> 诗 果 
18. </label> 

1 <label> 


20: <checkbox value='grape' /> 簿 克 
2 </label> 
A <label> 

3 <checkbox value=7 lemon' /> 森 标 
</label> 


(7 


3 ls ly by “hy 


</checkbox—-group> 
"6 .</Vview> 


k 


运行 效果 如 图 4-20 所 示 。 


ss eChat 全 17:48 100% [Ml WAChat 全 11:48 
例题 DEMO “we (©) 例题 DEMO 

第 4 草 小 程序 组 件 第 4 章 小 程序 上 

3. 表单 组 件 label 的 简单 应 用 3. 表单 组 件 label| 的 人 

(1) 使 用 for 属 性 绑 定 id (1) 使 用 for 属 性 缚 

苹果 ”葡萄 柠檬 w 苹果 葡 欧 

(2) 控件 直接 放 在 label 内 部 (2) 控件 直接 放 在 lat 

~ 苹果 葡萄 柠檬 vw 苹果 ~ 前 萄 |、 
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舍 看 干 个 供用 忆 输 入 或 选择 的 表单 组 件 以 及 提交 按钮 。 
<form> 组 件 人 允许 提交 的 内 部 表单 组 件 值 如 下 。 

e <switch>: 开关 选择 器 。 

e <nput>: 输入 框 组 件 。 

e <checkbox>: 多 项 选择 齿 。 

e <slider>: 清 动 选择 耸 。 

e <radio>: 时 项 选项 器。 

e <picker>: 滚动 选择 器 。 

<form> 组 件 有 3 个 属性 ， 如 表 4-28 所 示 。 


表 4-28 ”<form> 组 件 属性 
属性 名 称 备 
report-submit formId 用 于 发 送 模板 消 
提交 表单 数据 时 触发 submit | 携 市 值 为 : 
事件 event.detall= {value: {'nar 


bindreset 表 时 被 午 置 时 触发 reset 事件 


bindsubmut EventHandle 


注意 : 表单 中 携 送 数据 的 组 件 (例如 输入 框 ) 必须 各 有 name 属性 值 
否则 无 法 识别 提交 内 容 。 


【 例 4-14】 表单 组 件 form 的 简单 应 用 
WXML (pages/demo03/form/form.wxml)》 的 代码 厅 段 如 下 : 


. <View class='title'>3. 表 单 组 件 form 的 简单 应 用 </view> 

. <View Class='demo—box'> 

<view class='"'title'> 模 所 用 户 登 录 效 果 </view> 

<form bindsubmit='onSubmit"' bindreset="onReset'> 
<1input name='"'username" type="'text’ placeholder=' 请 输入 用 上) 
< InpPut name="password" Password placeholder=" 言 输入 密码 '> 
<button size= "mini’ form-type="submit'" > 提交 </button> 
<button size="mini" form-type='reset' > 重 置 </button> 

</form> 

10.</view> 


DD 一] 仙人 户外 


JS (pages/demo03/fornmy/form.js) 的 代码 片段 如 下 : 


{OY 第 


< margin: lorpxs 

i 

4. inputl 

De border: lrpx solid silver,; 
6. height: 60rpx; 

a 


运行 效果 如 图 4-21 所 示 。 


重要 要 重唱 汪 | 这 iat 全 10:01 前 生 归 和 二 NEChat a 10:02 
例题 口 EM 人 DEMGO 
第 4 草 小 程序 组 件 第 4 章 小 程序 组 件 第 4 
3. 表单 组 件 form 的 简单 应 用 3. 表单 组 件 form 的 简单 应 用 3. 表单 组 
模拟 用 户 登录 效果 模拟 用 户 登 录 效 果 模 所 
admin 请 
过 面 天 曙 夯 量 ji 
担 : 
局 微 信 小 程序 开发 零 基础 入 | 已 微 信 小 程序 开发 零 基础 入 门 局 微 信人 小: 
(a) 页 面 初始 效果 (b) 输入 用 户 名 和 密码 (c) 单 击 


[RK Console Sources Network Security Audits Storage App 
QO | top pilter 

开间 术 提交: 

pilusername: "admin”, password: 23456 

表单 已 被 重 置 。 


(d)》 表 单 被 提交 和 重 置 后 的 Console 控制 台 输 出 内 容 
度 | 4-21 老 旦 组 和 件 form 的 入 和音 刁 用 


亿 汪 微 信 小 程序 开发 零 基础 入 门 


是 单 击 “ 重 置 ”按钮 后 的 效果 ， 由 该 图 可 见 将 恢复 到 页 面 初始 效果 ; 图 (d) 具 
和 “ 重 置 ”按钮 后 Console 控制 台 的 3 行 输出 内 容 ， 其 中 第 1、2 行 是 单 击 
提示 语句 ， 由 该 图 可 见 用 户 输入 的 用 户 名 和 密码 将 在 提交 时 被 获取 ， 第 3 : 
按钮 后 的 提示 语句 。 


4.4.6 picker 


<picker> 是 从 抵 部 弹 起 的 深 动 选择 占 组 件 , 目前 根据 mode 属性 值 的 不 | 
髓 ， 分 别 是 普通 选择 器 、 多 列 选择 器 、 时 间 选 择 器 、 日 期 选择 器 、 省 市 [ 
mode 值 不 写 ， 其 款 认 效 末 是 普 明 选 择 夫 。 

普通 选择 器 

当 mode='selector 时 为 普通 选择 些 效 来 ， 相 关 属 性 如 表 4-29 所 示 。 

表 4-29 <picker mode='selector> 组 件 属 性 
属性 名 说 明 

range 当 mode 为 selector 或 multiSelector 时 ，raneg 


当 range 是 一 个 Object Array 时 ， 通 过 range 
指定 Object 中 key 的 值 作为 选择 费 显 示 内 容 


Value 的 值 表示 选择 了 range 中 的 第 几 个 (下 
value Number es 

开始 ) 

Value 改变 时 触发 change ,event.detail = 
es Boe | al "a i i 

value 


disabled false ”| 是 否 禁 


bindcancel | EventHandle | | 取消 选择 或 单 击 遮 举 层 收 起 picker 时 触发 
例如 自 定义 一 个 简易 的 普通 选择 器 ， 其 WXML 代码 片段 如 下 : 


range-key |String 


1]. <picker mode="'selector’' range=" {{selectorltems}}" bindchange=" sr 
<view> 当 前 选择 : {{selector}}</view> 
3. </picker> 


[5 


在 WXML 代码 中 '{{selectorItems}}' 是 选项 数组 ，bindchange='selectorC 
时 会 触 友 的 函数 ，{{selector}} 是 用 于 显示 选项 内 容 的 变量 ， 访 数组、 函数 
目 定 义 。 

对 应 的 JS 代码 上 户 段 如 下 : 


TITT EA 


第 4 章 小 程序 
3. 表单 组 件 picker 的 | 


(1) 普通 选择 有 
当前 选择 : 短刀 


(2) 多 列 选 择 昌 
当前 选择 : 

(3) 时 间 选 择 昌 
当前 选择 : 


(4) 日 期 选择 8 


当前 选择 : 
(5) 省 市 区 选择 
i 当前 选择 : 
en 加 微 信 小 程序 开发 零 吉 
向 萄 
(a) 单 击 普通 选择 器 后 的 效果 (b) 选择 并 确定 后 


图 4-22 ”表单 组 件 picker 的 普通 选择 器 的 简单 应 用 


多 列 选择 器 
当 mode 一 multiSelector' 时 为 多 列 选择 器 效果 (最 低 版 本 为 1.4.0)， 桂 
所 示 。 


表 4-30 <picker mode='multiSelector> 组 件 属性 
属 性 名 说 明 
ee 站 当 mode 为 selector 或 multiSelector 时 
效 。 二 维 数组 ， 长 度 表示 多 少 列 ， 数 旨 
表示 每 列 的 数据 ， 例 如 [["a","b"], ["c", 


Wi i 一 ha rr 


range 


Oblject Array 
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例如 目 定 义 一 个 简 多 的 多 列 选择 冀 ， 其 WXML 代码 片段 如 下 : 


1. <picker mode="multiSelector’" range="|1 {multiSelectorItemst}! 
multiSelectorChange'> 

党 <view> 当 前 选择 : {{multiselector}}</view> 

3. </picker> 


在 WXML 代码 中 {{multiSelectorItems}} 是 选项 数组 ，bindchange'm 
是 选项 改变 时 会 触及 的 函数 ，{ {multiSelector}} 是 用 于 显示 选项 内 容 的 变量 
对 应 的 JS 代码 厂 段 如 下 : 


1 Page {ll 

ee data: I 

3. multiSelectorItems: [[ "多 宋 汤 '， 了 茧 站 汤 ']， [牛排 "， "猪排 ' ， 
淋 '，' 鸡 蛋 布 丁 ']] 

4. Fi 

2 multiSelectorChange: function(e) | 

6. let arrayIndex=e.detail.value; / /获得 选项 的 间 

7 let array=this.data.multiSselectorItems; / /获得 选项 数 2 

8 let value=new Array(}:; / /声明 一 个 空 数组 ， 用 于 

939. for(llet 1=0;i<arraylndex.length;1i++) { 

10. let k=arrayIndex[i]; /7 第 工 个 数组 | 

1 et warcray[lilikl: // 获 得 第 i 个 

于 value .push (v); // 往 数组 中 人 退 力 

1 } 

14: this.setData({f multiSelector: value }):; / /将 选项 名 称 5 

> 。 

PBs 


开发 者 可 以 日 由 更 改 数 组 内 容 和 元 系 个 数 ， 运 和 ass 4-23 


例题 DEMO 


第 4 章 小 程序 组 
3. 表单 组 件 picker 的 简 


(1) 普通 选择 器 
当前 选择 : 葡萄 


(2) 多 列 选择 器 
当前 [i 先 择 : 荐 诗 汤 鱼 村 fy 


{ 第 


时 间 选 择 器 
当 mode'time' 时 为 时 间 选 择 占 效果 ， 相 天 属性 如 表 4-31 所 示 。 


-和 4-31 <picker mode='time'> 组 件 属性 
属性 名 说 明 
value Er 表示 选中 的 时 间 ， 格 式 为 "hh:mm" 
start sting | 表示 有 效 时 间 范 围 的 开始 ， 字 从 串 格 式 为 "hh:mn 
end ae 表示 有 效 时 间 范 围 的 结束 ， 字 和 人 符 串 格 式 为 "hh:mr 
bindchange | ] EventHande | value 改变 时 和 触发 change 事件 ，eventdetaill = fvaluk 
bindcancel | EventHandle | | 取消 选择 时 触发 
disabled false ”| 是 否 禁 用 


例如 目 定 义 一 个 简易 的 时 间 选 择 右 ， 其 WXML 代码 片段 如 下 : 


1. <picker mode="'time" bindchange='timeChange'> 
<Vview> 当 前 选择 : {{time}}</view> 
3. </picker> 


[5 


在 WXML 代码 中 bindchange=timeChange' 十 选项 改变 时 会 触 肥 的 函数 
显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 自 定义 。 
对 应 的 JS 代码 厂 段 如 下 : 
Page ({ 
timeChange: function(e) (| 
let value=e .detail .value: // 疆 得 选择 的 时 间 


this.setDatal({ time: value });  // 将 选项 名 称 果 新 到 WXML 见 四 
} 


I 


}) 


运行 效果 如 图 4-24 所 示 。 
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3. 表单 组 件 picker 的 币 


(1) 普通 选择 器 
当前 选择 : 葡萄 


(2) 多 列 选择 器 
当前 选择 : 茂 诗 汤 鱼 提 EF,3 
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日 期 选择 器 
当 mode='date' 时 为 日 期 选择 只 效 末 ， 相 天 属性 如 表 4-32 所 示 。 
表 4-32 <picker mode='date'> 组 件 属性 


属性 名 说 明 
value Er 表示 选中 的 日 期 ， 格 式 为 "YYYY-MM-DD" 


start String |  ” | 表示 有 效 日 期 范围 的 开始 ， 字 符 串 格式 为 "YYYY- 
end Sting |  ” | 表示 有 效 日 期 范围 的 结束 ， 字 符 串 格式 为 "YYYY- 


fields 有 效 全 为 year、month、day， 表 示 选 择 喜 的 粒度 
bindchange EventHande | | 当 value 改变 时 触 友 change 事件 ,event.detail = {val 
bindcancel EventHande | | 取消 选择 时 触发 
disabled 是 否 禁 用 

其 中 ，fields 属性 的 有 效 值 如 下 。 

。 year: 选择 融 粒 度 为 年 。 

e month: 选择 占 粒 上 度 为 月 份 。 

全 day: 选择 需 粒 度 为 天 。 

例如 目 定 义 一 个 简易 的 日 期 选择 此 ， 其 WXML 代码 片段 如 下 : 


1. <picker mode="'date" bindchange="'dateChange'> 


<view> 当 前 选择 : {{datel}l}</view> 
3 </PICkerS 


在 WXML 代码 中 bindchange'dateChange' 古 选项 改变 时 会 触 友 的 函数 


显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 自 定义 。 
对 应 的 JS 代码 片段 如 下 : 


1. Bagel 

2 dateChange: functiont(e)} 1 

s let wvalue=e.detail .Value: / /获得 选择 的 日 期 

4 this.setData({ date: value }); /1/ 将 选项 名 称 更 新 到 WXML 页 四 
3 } 

6. 上 |) 


运行 效果 如 图 4-25 所 示 。 
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3. 表单 组 件 picker 的 简 妾 


(1) 普通 选择 器 


{OY 第 


省 市 区 选择 器 
当 mode='region' 时 为 省 市 区 选择 费 鸡 采 〈( 最 低 版 本 为 1.4.0)， 相 关 属 人? 
和 4-33 <picker mode='region'> 组 件 属性 


属性 名 说 明 
value Fr 表示 选中 的 省 市 区 ， 软 认 选 中 每 一 列 的 第 一 个 人 
custom-item sting | | 可 为 每 一 列 的 顶部 诬 加 一 个 目 定义 的 项 
bindchange EventHandle | | 当 value 改变 时 触发 change 事件 ,event.detail = {val 
bindcancel EventHandle | 取消 选择 时 触发 
disabled false ”| 是 否 禁 用 
例如 目 定 义 一 个 简易 的 省 市 区 选择 器 ， 其 WXML 代码 片段 如 下 : 


1 .<PICKeTr mode="'region" bindchange="reglonChange'> 
<view> 当 前 选择 : {{region}}</view> 
六 


在 WXML 代码 中 bindchange'regionChange' 是 选项 改变 时 会 触发 的 医 
用 于 显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 目 定义 。 
对 应 的 JS 代码 片段 如 下 : 


1. Page l(t 

有 二 regqgionChange: functionl(e)} 1 

ee let value=e.detail. values // 绪 得 选择 的 省 市 区 

有 this.setData({f region: value })7 // 将 选项 名 称 更 新 到 WXML 页 丰 
ys } 

Ga 1} 


注意 : 这 里 的 e.detail.value 是 一 个 包含 3 个 元 素 的 数组 ， 分 别 表 示 省 


运行 效果 如 图 4-26 所 示 。 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 上 


(1) 己 弟 通 选择 中 
bi 


(2) 多 列 选择 器 
sz 二 Ts、 于 二 FE: 在 世 > 和 白 下 


玫 习 。 微 信 小 程序 开发 零 基 础 入 门 


【 例 4-1S】 表单 组 件 picker 的 简单 应 用 
WXML (pages/demo03/pickerpickerwxml) 的 代码 片段 如 下 : 


1. <view class='title'>3. 表 单 组 件 picker 的 简单 应 用 </view> 

2. <View Class='demo—Dbox'> 

3. <view class='title'>(1) 普 通 选 择 露 </vriew> 

4. <picker mode~="selector'" range='{{selectorIitems}}" bindchange= 
SelectorCharge > 

= <Vview> 当 前 选择 : {{selector}}</view> 

6. </picker> 

7 了 7. </Vview> 

8. <view Cass= aqQemo 一 DoX > 

9 。 <View class='title'>(2) 多 列 选 择 器 </view> 


10- <picker mode="'multisSelector" range="{{multiSelectorIltemsl] 
multiSelectorChange'> 

3 <view> 当 前 选择 : {{multiSsSelector}}</view> 

12. </picker> 

13.</view> 

14.<view Class="'demo—box'> 

15. <view class='title'>(3) 时 间 选 择 器 </view> 

16- <picker mode= 七 Ime” bindchange='timeChange'»> 

1 <view> 当 前 选择 : { {time}}</view> 

18. </picker> 

19.</view> 

2U0.<view Class='demo—box'> 

21. <view class="title'>(4) 日 期 选择 器 </view> 

22. <pDicker mode="'date" bindchange="'dateCchange'> 

2 <View> 当 前 选择 : {{date}}</view> 

24. </picker> 

25.</Vview> 

26.<Vview Class='demo—box'> 

27. <view class='title'>(5) 省 市 区 选择 器 </view> 


28. <picker mode="region’' bindchange="reglonChange'> 
29. <view> 当 前 选择 : { {region}}</view> 


30. </picker> 
31 .</viewy> 


JS (pages/demo03/picker/picker.js〉 的 代 公 上 厂 段 如 下 : 


1. Pagel(tl 
2 data: I 
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下 for{(let 1i=0;j<arraylIndex. length;1it++) | 

16. let k=arrayIndex[i]; /1 第 i 个 数组 的 元 率 
De Iet ww—arravili]ikls / /获得 第 i 个 数组 东 
8. value.push (v); // 往 数组 中 追加 新 元 
9 } 


20. this.setDatal({ multiselector: value }); // 将 选项 名 称 更 新 到 
21. 1}, 


22. 七 ImeChange: functionl(e) 1 


过 本 let value=e.detail.value; / / 绪 得 选择 的 时 间 
24. Ehisas SetDatal(ll time: yalue 1)- // 将 选项 名 称 更 新 型 
25- 上 
26- dateChange: functionl(e} 1{ 
27. let value=e.detail.value; // 狼 得 选择 的 日 期 
28 . this.setDatal{l date: value 1}): / /将 选项 名 称 更 新 到 
23- 上 
30 。 reglionChange: function(e) 1{ 
区 let wvalue=e.detail.value; // 疆 得 选择 的 省 市 区 
3 this. setDatartf regqion: value ji / /将 选项 名 称 更 新 到 
全 
34.}) 

【代码 说 明 】 


本 示例 是 将 5 种 选择 器 的 代码 汇总 而 成 ， 因 此 不 再 袭 述 实现 过 程 ， 
照 前 面 的 图 4-22 一 图 4-26。 


4.4.7 picker-view 
<picker-view> 是 散 入 页 面 的 深 动 选择 器， 相关 属性 如 表 4-34 所 示 。 


表 4-34 <picker-view> 组 件 属性 


属性 名 | 类 型 说 明 


数组 中 的 数字 依次 表示 picker-view 


value NumberArray | picker-View-column 选择 的 第 几 项 〈 下 标 从 0 开始 
字 大 于 picker-view-column 可 选项 长 度 时 选择 最 后 - 

indicator-style 设置 选择 占 中 间 选 中 框 的 样式 

indicator-class 设置 选择 器 中 间 选 中 框 的 类 名 


mask-style String 设置 遮 罩 层 的 样式 


下 7 微 信 小 程序 开发 零 基础 入 门 、~ 


下 


下] 


te 
PO ， 


王 己 记 
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<View Class='demo—box'> 


<view class='title'> 今 日 人 菜单 </view> 
<view Cl1ass= title>f [mena }</view> 
<picker—viewvalue="{{value}}" indicator—style="'height: 50p: 
‘PickerviewChange'> 
<plilcker—view—cCcolumn> 
<VlIew Class="'col" wx:for="{{soup}}" wx:key—'s{{index}}'>1{1 
</picker—-view—-column> 
<DicCker—view— Column> 
<Vlilew Class="col" wzx:for="{{maincoursel}}' wzx:key 
{{item} }</view> 
</picker—-view—-column> 
<piCcCker—vliew—Column> 
<View Class='col" wx:Ifor="{{dessert}}" wx:key—='"'dltl 
{ {item} }</view> 
</picker—-view—-column> 
</picker-view> 
</view> 


WXSS (pages/demo03/picker-view/picker-view.wxss) 的 代码 片段 如 下 : 


picker—view I 


} 


width: 100%; 
height: 300pxr 


| 


} 


line—height: sO0pxs 


JS (pages/demo03/picker-view/picker-view.js》 的 代 公 片段 如 下 : 


Page ({ 


data: I 
soup: [' 奶 油 朋 冶 汤 '，' 罗 宋 汤 '，' 牛 肉 消 疡 ']， 
maincourse: [' 岂 小 牛肉 知 '"，' 传 统 烤 诗 排 '，' 清 闫 二 文公"']， 
dessert: [' 坚 果 冰 淇 淋 '，' 焦 糖 布 J'，' 奶 酷 重 糙 ']， 
ae 1.11。 / /默认 每 个 选项 的 数组 下 标 
menu: [|] 

}, 

pickerviewChange: functionltle}) 1 
let v=e.detail.value; / /获取 每 个 选项 的 数组 下 标 
let menu=[];} 
menu.push (this.data.soup[lv[0]])}); 
menu.push (this.data.maincoursel[lv[lil|l)}); 
menu.push{this.data.dessertivi2lil}: 


{HY 第 


标 ， 并 将 结果 更 新 到 {{fmenu}} 变 量 中 ， 最 后 显示 到 <plcker-view> 组 件 的 上 - 
hat 地 11:26 
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3. 表单 组 件 picker-view 的 简单 应 用 


3. 表单 组 件 picker-view 的 简单 


今日 菜单 今日 菜单 


奶油 蘑菇 汤 , 传 统 烤 羊 排 ,奶酪 


前 小 牛肉 卷 ”坚果 冰淇淋 
前 小 牛肉 卷 ” 焦 


传统 烤 羊 排 加 
奶油 蘑菇 汤 。 传统 烤 羊 排 ” 奶 
清 者 三 文 鱼 
罗 宁 汤 清 者 三 文 鱼 
四 微 信 小 程序 开发 零 基 础 入 门 
加 微 信 小 程序 开发 地 基础 入 门 
(a) 页 面 初始 效果 (b) 菜单 更 改 后 的 效 : 


图 4-27 表单 组 件 picker-view 的 简单 应 用 


在 图 4-27 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 默认 选中 每 列 的 第 2 个 六 
早 更 改 后 的 效果 ， 由 该 图 可 见 此 时 最 新 选项 的 内 容 已 经 显示 a 到 及 时 项 病 。 


4.4.8 radio 

<Tradio> 为 单 选 框 组 件 ， 往 往 需 要 与 <radio-group> 组 件 配合 使 用 ， 其 中 
标签 之 加 可 以 包 侣 在 干 个 <radio> 组 件 。 

<radio-group> 组 件 只 有 一 个 属性 ， 如 表 4-35 所 示 。 


表 4-35 ”<radio-group> 组 件 属 性 


说 明 
下 | 思 主 FR radin~ 组 性 渤 中 鼎 


属性 名 称 


下 -3 微 信 小 程序 开发 零 基础 入 门 


例如 : 


- <Iadlio-group> 

<radio value='watermelon' checked /> 西瓜 
<radio Vvalue="'orange" disabled /> 概 子 
<radio walue="'strawberry'’ /ss 和 草 各 

<radio value='pineapPple' /> 省 区 

. </radio--group> 


Dn 


其 效果 如 图 4-28 所 示 。 


多 西瓜 ) 栖 子 ，) 草莓 ) 菠 葛 
图 4-28 ”表单 组 件 radio 的 简单 应 用 


由 图 4-28 可 见 ,“ 西 瓜 ” 选 项 古寺 认 被 选中 状态 ,“ 橙 于 ”选项 是 至 直 
选择 状态 ， 其 他 选项 为 未 选中 状态 。 注 意 ，<radio-group> 组 件 内 部 不 允许 允 
选 ， 一 旦 选择 了 其 他 选项 ， 原 先 被 选中 的 选项 将 变 回 未 选中 状态 。 

【 例 4-17】 表单 组 件 radio 的 简单 应 用 

WXML (pages/demo03/radioradio.wxml) 的 代码 片段 如 下 : 


1. <view class='title'>3. 表 单 组 件 radio 的 简单 应 用 </view> 

2. <View Class="'demo-box'> 

Ss <view class='title'> 使 用 数组 批量 生成 选项 </view> 

4. <rIadio-group bindchange="'radioChange'> 

< <View Class="'test" wx:for="'{{radioltems}}" wx:key="1item 
6. <rIadio value='{{item.valuel}}' checked="'{{item.checkedl}}'" 
Re </view> 

8. </radio-group> 

9. </view> 


JS (pages/demo03/radioradio.js) 的 代码 请 段 如 下 : 


Page (1{ 
data: I 


radioItems: | 


户 La To 请 


{ name: 1 华 果 ' ， value: “apple” }, 


t 11:09 
例 地 CEMO 
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3. 表单 组 件 radio 的 简单 应 用 3. 表单 组 件 radi o 的 简 ! 
使 用 数组 批量 生成 选项 使 用 数组 批量 生成 i 
苹果 苹果 
(人 栓 子 橙子 
列子 
再 雪 草鞋 
葡萄 
局 微 信 小 程序 开发 霍 基 础 人 门 已 微 信 小 程序 开发 要 基 
(a》 贝 面 初 始 状 态 Cb》 新 选项 被 选中 半 


[KR Console Sources Network Application Security Audits Storage A 
QO top 本 Filter Default leve 


radio 发 生变 化 ， 被 选中 的 值 是 : banana 


» 
(c) 新 选项 被 选中 时 Console 输出 的 内 容 
图 4-29 ”表单 组 件 radio 的 简单 应 用 
【代码 说 明 】 


在 radio.js 的 data 中 设置 了 一 个 数组 radioItems， 用 于 记录 多 选 选 项 的 
(value) 以 及 初始 的 选中 状态 (checked)。 在 radio.wxml 中 使 用 <radio-group- 
并 在 其 内部 使 用 <view> 标 位 配合 wx:for 循环 实现 批量 生成 多 个 radio 组 件 上 

为 达到 监听 选项 改变 的 目的 ， 在 <radio-group> 标 等 上 添加 属性 bind 
radioChange 为 目 定 义 国 数 名 称 。 然 后 在 radio.js 中 仍 加 该 钞 数 的 具体 内 容 ， 
任 Console 控制 台 打 印 输出 最 新 选中 的 所 有 全 。 

在 图 4-29 中 ， 由 图 (a) 可 见 页 和 面 初始 显示 效果 成 功 识 别 了 选项 的 名 i 
1 从 榨 地 -] 先 匣 汪 先 中 误 果 )， 由 图 (bY) 可 了 员 一 日 1 先 『 了 新 的 ] 先 项， 则 源 包 1 先 匣 将 


扶 汪 3 微 信 小 程序 开发 零 基础 入 门 


属 性 名 说 明 


aa 是否 本 
= ember |0 | 当时 取 介 

color 9 好 条 的 闫 色 【( 请 使 用 background 
selected-color 己 选 择 的 岂 色 (请 使 用 activeColor 
二 条 出 也 色 

block-size 滑 块 的 大 小 ， 取 值 范 围 为 12 一 28 
i 将 买 而 菇 多 

show-value 是 否 显示 当前 value 


bindchange ee 完成 一 次 拖 动 后 触发 的 事件 ，even 
守 = {value: value)} 
bindchanging i 拖 动 过 程 中 触发 的 事件 ，event.d 
z {value: value} 


例如 制作 一 个 目 定 义 滑动 条 ， 服 小 从 为 50、 好 大 值 为 200， 并 且 和 在 右 


<Sslider min="50™" max="200™ show—value/> 


其 戏 末 如 图 4-30 所 示 。 


图 4-30 ”表单 组 件 slider 的 简单 应 用 


滑动 条 主要 是 由 滑动 线条 与 滑 块 组 成 的 ， 滑 块 左 侧 的 彩色 线条 为 选中 | 


数值 沁 围 。 背 块 越 往 右 移 动 ， 所 演示 的 数值 束 越 大 。 


DD 


【 例 4-18】 表单 组 件 slider 的 简单 应 用 
WXML (pages/demo03/slider/slider.wxml)〉 的 代码 片段 如 下 : 


. <view class='title'>3. 表 单 组 件 slider 的 简单 应 用 </view> 
。 <VIilew Class='demo—box'> 


<view class='title'>(1) 背 动 条 右 侧 显示 当前 取 值 </view> 
<Slider min='0" max="100" wvalue="o0" step='S" show—value 


. </view> 
. <Vliew Class="'demo—box'> 


<View Class='title'>(2) 目 定义 消 动 条 闫 色 和 背 块 样式 </view> 


<Slider min="0" max="100" value="'o0" block—size="20" blo 


{HO 第 


coOnsole. Toogt(t sliider 发 生变 化 ， 当 前 值 是 : ' + e.detail .Value) 
4. } 
= 


15:19 证 生硬 而 名 NEChat 党 15:20 
例 贿 DEMO 例题 DEMO 二 本 和 
第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 
3. 表单 组 件 slider 的 简单 应 用 


(1) 滑动 条 右 侧 显 示 当 前 取 值 


(2) 目 定 光滑 动 条 黄色 和 滑 块 样式 
一 一 全 


(3) 禁用 滑动 条 ( 无 法 改变 当前 数值 ) 


(4 滑动 条 事件 监听 


局 微 信 小 程序 开发 零 基 础 入门 


3. 表单 组 件 slider 的 简单 应 用 


(1) 滑动 条 右 侧 显示 当前 取 值 


(2) 自 定 久 滑 动 条 颜色 和 滑 块 样式 


(3) 蓉 用 滑动 条 ( 无 法 改变 当前 数值 


(4) 滑动 条 事件 a 


号 微 信 小 程序 开发 要 基础 入 站 


(a) 页 面 初始 状态 (b) 第 4 个 清 块 移动 触发 监听 


[R Console Sources Network Application Secuyrity Audits Storage Ai 


人 top ™ Filter Default leve 


slider 发 生变 化， 当前 值 是 : 73 


(Cc) 第 4 个 请 堪 移 动 后 Console 输出 的 内 容 
图 4-31 表单 组 件 slider 的 简单 应 用 
【代码 说 明 】 
本 示例 依次 列举 了 4 种 滑动 条 的 情况 ， 即 滑动 条 右 侧 显示 当前 取 值 、 
和 渭 块 梓 式 、 蔡 用 消 动 条 (无 法 改变 当前 数值 ;)、 滑 动 条 事件 监听 。 
在 图 4-31 中 ， 图 (a) 是 页 面 初始 状态 ， 由 该 图 可 见 消 动 条 1 显示 当 
及 其 请 块 的 关 色 更 改 为 红色 ， 并 且 滑 块 的 尺寸 缩小 为 20， 滑 动 条 3 由 于 被 : 


下 fj 微 信 小 程序 开发 零 基础 入 门 


例如 : 


.<switch checked /> 选中 
.<switch /> 没 选 中 


其 效果 如 图 4-32 所 示 。 


图 4-32 ”表单 组 件 switch 的 简单 应 用 
由 图 4-32 可 见 ， 当 按钮 在 右边 时 为 选中 状态 ,此 时 选择 右 为 彩色 效果 ， 


当 按 钮 在 左边 时 为 没 迁 中 状态 ， 此 时 选择 融 为 黑 日 效 来 。 


i 


【 例 4-19】 表单 组 件 switch 的 简单 应 用 
WXML (pages/demo03/switch/switch.wxml) 的 代码 片段 如 下 : 


。 <Vliew Class='title'»3 .表单 组 件 swlitch 的 简单 应 用 < /view> 
。 <Vlew Class='demo—box'»> 


<view class='title'>switch 事件 监听 </view> 
<switch checked bindchange="switchChange™" /> 


. </view> 


JS (pages/demo03/switchy/switch.js) 的 代码 片段 如 下 : 


Page (1 
switchChange: functionte) I 
console.logl(" switch 发 生变 化 ， 当 前 值 是 : ' + e.detail .Value) 
} 
}) 


运行 效果 如 图 4-33 所 示 。 


16:25 


例 冉 DEMO 


第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 
3. 表单 组 件 switch 的 简单 应 用 3. 表单 组 件 switch 的 简单 应 插 
switch 事 件 监听 switch 事 忻 监听 


@ 


世间 全 证 量 订 开 发 本 其 HA 站 中 信人 十 /和 吾 序 开 上 要 基础 入门 


Console 


【代码 说 明 】 
在 switch.wxml 中 使 用 =switch> 标 等 配合 checked 属性 实现 默认 选中 的 
义 单 击 事件 switchChange。 在 switchjjs 中 描述 switchChangeO0 函 数 ， 一 旦 被 钙 
制 台 输出 当前 switch 的 选择 结果 。 由 图 4-33 可 见 ， 关闭 switch 开关 后 Consol 


4.4.11 textarea 
<textarea> 为 多 行 输入 框 ， 该 组 件 对 应 的 属性 如 表 4-39 所 示 。 


表 4-39 <textarea> 组 件 属性 


属 性 名 
value 
placeholder 
placeholder- 
style 
placeholder- 
class 
disabled 
maxleneth 
auto-focus 
focus 
auto-helsht 


fixed 


cursor-spacing 


cUTSOT 
show-confirm- 
bar 


aelection-astart 


String 
String 


Boolean 


zw al 
Wi 


Boolean 
Boolean 
Boolean 


Boolean 


Number 


Number 


Boolean 


Number 


" Filter 


switch 发 生变 化 ， 当 前 值 是 : false 


Sources Network Application Security Audits Storag 


Defa 


Cc) 切换 switch 按钮 后 Console 输出 的 内 容 
图 4.33 〈 续 ) 


textarea- 
placeholder 
false 

4 
false 
false 
false 


false 


fh 
ba 


说 明 
输入 框 的 内 容 
全 入 框 为 空 时 的 占 位 符 


指定 placeholder 的 样式 
指定 placeholder 的 样式 类 


是 否 茶 用 


最 大 竹 和 长度， 设置 为 -1 的 时 候 不 限 
目 动 聚 焦 ， 拉 起 键盘 

是 否 自 动 增高 ， 设 置 auto-height 时 st 
加 果 textarea 是 在 一 个 position:fixed 上 
定 属性 fixed 为 true 

指定 光标 与 键盘 的 距离 ， 单 位 为 pz, 
部 的 距离 和 cursor-spacing 指定 的 距 下 
与 键盘 的 距离 

指定 focus 时 的 光标 位 置 (最 低 版 本 ; 
是 否 显示 键盘 上 方 市 有 “完成 ”按钮 | 
为 1.6.0) 

元 标题 区 位 置 ， 百 动 桶 集 林 有 效 ， 需 : 


下 5 微 信 小 程序 开发 零 基础 入 门 


DO 


户 请 


【 例 4-20】 表单 组 件 textarea 的 简单 应 用 
WXML (pages/demo03/textarea/textarea.wxml ) 的 代码 片段 如 下 : 


<View class='title'>3. 表 单 组 件 textarea 的 简单 应 用 </view> 
<V1iew Class="'demo—box'> 
<view class='title'>(1) 目 动 变 高 </view> 
<textarea auto-height placeholder=" 默 认 只 有 一 行 ， 但 可 以 上 自动 变 高 " ， 
</view> 
<View Cass= aqemo 一 DoX > 
<view class='title'>(2) 目 和 定义 占 位 侍 疝 色 </view> 
<textarea placeholder="placeholder 尖 色 是 红色 的 ” placeholdei 
eolorsredr™ > 
</view> 
.<V1ilew Class='demo—box'> 


<View class='title'>(3) 被 禁用 状态 </view> 
<textarea plLlaceholder=" 该 文本 框 已 被 某 用 "disabled /> 


.</view> 


WXSS (pages/demo03/textarea/textarea.wxss) 的 代码 片段 如 下 : 


textareal 

width: 100%;» 

border: lrpx solid grav; 
} 


运行 效果 如 图 4-34 所 示 。 


TTTT EChiat < 反 17:17 面 硬 而 硬 生 WNeEChat 全 ] 7:19 
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第 4 章 小 程序 组 件 
3. 表单 组 件 textarea 的 简单 应 用 


例题 DEMO 


第 4 章 小 程序 组 件 
3. 表单 组 件 textarea 的 简单 应 


5 2 (1) 自动 变 高 
革 ]I 人 只 有 一 行 ， 但 可 以 目 动 杰 局 
天 对 地 ， 雨 对 风 。 
大 陆 对 长 空 ， 
(2) 目 定 义 占 位 符 颜 色 山花 对 海 树 ， 刘 日 对 将 窜 。 
placeholder 颜 色 是 红色 的 ( 文本 框 自动 变 高 了 ) 


(2) 自 定义 占 位 符 颜色 
placeholder 闫 色 是 红色 的 


(3) 被 禁用 状态 
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企图 4-34 中 ， 图 (a) 为 页 面 初始 状态 ， 此 时 第 1 组 中 的 文本 框 默 认 
组 中 的 占 位 符 是 目 定 义 的 红色 效果 ， 第 3 组 中 的 文本 框 已 被 茶 用 ， 无 法 输 ， 
在 第 1 组 的 文本 框 中 输入 多 行内 容 ， 由 该 图 可 见 此 时 文本 框 已 经 目 动 变 高 


导航 组 件 <navlgator> 用 于 单 击 跳 转 页 面 链 接 ， 其 对 应 的 属性 如 表 4-40 
表 4-40 ”navigator 组 件 属性 


属性 名 说 了 明 


target = 在 哪个 目标 上 发 生 跳 转 ， 默 认 当 前 小 程 
url Sting | | 当前 小 程序 内 的 跳 转 链接 地 址 
open-type 跳 转 方式 ， 共 有 5 种 方式 


其 中 open-type 属性 对 应 的 5 种 取 值 如 表 4-41 所 示 。 


表 4-41 open-type 属性 


属 性 值 说 明 
ee 默认 值 ， 表 示 跳 转 新 页 面 打 开 新 地 址 内 容 (等 同 于 Wx.navigat 
人 TpMiniProgram0 的 功能 
redirect 重 定 同 ， 表 示 在 当前 贝 面 重 新 打开 新 地 址 内 容 (等 同 于 wx.redirectTo 


switchTab 切换 tab 面板 ， 表 示 幅 转 指定 tab 页 面 重 新 打开 新 地 址 内 容 〈 等 同 于 wx.swi 
reLaunch 切换 tab 面板 ， 表 示 跳 丢 指 定 tab 页 面 重 新 打开 新 地 址 内 容 (等同 于 wx.swil 
navigateBack | 返回 上 一 页 (等同 于 wx.navigateBackO 的 功能 ) 


注意 : 上 述 等 同 功能 的 用 法 详 见 第 11 章 “ 界 面 APT”。 


例如 


1. <navigator url="../new/new"> 
<button type="primary"> 跳 转 到 新 页 面 打开 新 内 容 </button> 
3. </navigator> 
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上 述 代码 表示 在 导航 组 件 <navigator> 中 内 内 按 钮 组 件 <button> 来 实 刀 
<navigator> 组 件 并 未 声明 open-type 属性 ， 因 此 表示 默认 情况 ， 即 跳 转 新 页 


下 了 微 信 小 程序 开发 零 基 础 入 门 


1. Paget{l 

2 onLoad: function{(options) I{ 

可: console.lod(options .date);y// 将 在 控制 台 打 印 输出 20180803 
4 } 

2. 1}) 


【 例 4-21】 和 守 航 组 件 navigator 的 简单 应 用 
主页 面 WXML (pages/demo04mavigatornavigatorwxml) 的 代码 片段 如 下 : 


. <view class='title'>4. 了 守 航 组 件 navigator 的 简单 应 用 </view> 
- <View Class="'demo—box'> 
<view Class'title"'>(1) 单 击 打开 新 页 面 </view> 
<navigator url="../new/new"> 

<button tvpe="primary"> 中 转 到 新 页 面 打 开 新 内 容 </button> 
</navigator> 
. </view> 
. <View Class="'demo—box'> 


<Vliew Class='title'> (2) 单 击 重 定 同 到 新 页 面 </view> 


| 一 
1 


<navigator url="../redirect/redirect"™" open-type="'redirect 
4 <button type="primary” > 在 当前 页 重新 打开 新 内 容 </button> 
下 二 </navigator> 
13.</viewy> 


新 页 面 新 内 容 的 WXML (pages/demo04mmewmmew.wxml) 的 代码 片段 如 
<text> 新 窗口 打开 的 新 页 面 ， 可 以 返回 navigator .WwWKm1L< /七 已 X 七 > 

当前 页 面 新 内 容 的 WXML (pages/demo04/redirect/redirect.wxml)》 的 代 
<text> 重 定 同 的 新 页 面 ， 无 法 返回 navigator.wxml</text> 


运行 效果 如 图 4-35 所 示 。 


重要 二 重重 Wt :26 


< 俩 精 DEMGO 


新 窗口 打开 的 新 页 面 ， 可 以 返回 重 定向 的 新 页 面 ，3 


navigator.wxml 


第 4 章 小 程序 组 件 
4. 导航 组 件 navigator 的 简单 应 用 


(1) 单 击 打 开 新 页 面 
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【 代码 说 明 】 

本 示例 共有 3 个 页 面 ， 即 初始 页 面 navigatorwxml、 新 页 面 内 容 new.v 
redirect.wxml 。 在 初始 页 面 使 用 了 两 个 <navigator> 组 件 分 别 用 于 打 
redirect.wxml。 由 图 4-35 可 见 ， 新 页 面 打 开 的 新 内 容 可 以 返回 初始 页 面 ，， 
上 方 又 覆盖 了 一 层 新 页 面 ; 而 重 定 问 打 开 的 新 内 容 是 无 法 返回 初始 页 面 的 ， 
挥 了 初始 页 面 的 内 容 。 


媒体 组 件 日 前 主要 包含 4 种， 如 表 4-42 所 示 。 


表 4-42 媒体 组 件 
组 件 名 称 说 明 
audio 音频 组 件 
image 图 片 组 件 
Video 视频 组 件 
camera 相机 组 件 


4.0.1 audio 
<audio> 是 音频 组 件 ， 可 以 用 于 播放 本 地 或 网 络 音频 。 该 组 件 对 应 的 属 
ds audio 组 件 属 性 


局 证 名 员 
1d i audio 组 件 的 唯一 标识 行 

和 ne | | 要 播 帮 音频 的 届 源 地 下 

loop 是 否 循环 播放 

controls 是 侣 显示 默认 控件 


Es 默认 控件 上 的 音频 封面 的 图 上 
证 旋 放 Ee controls 属性 值 为 mlse， 则 设置 ] 
z wt | 默认 控件 上 的 音频 名 字 , 如 果 con 

默认 控件 上 的 作者 名 字 , 如 果 con 


当 发 生 错 误 时 触发 error 事 俐 


开本 微 信 小 程序 开发 零 基础 入 门 


co = TT MN 户 La 捕 


My 


[5 


10. 
于 工 。 
下 2 
1 3 
1 4. 


【 例 4-22】 妹 体 组 件 audio 的 简单 应 用 
WXMI (pages/demo05/audio/audio.wxml》 的 代码 厂 段 如 下 : 


<view class='title'>5 .媒体 组 件 audio 的 简单 应 用 </view> 

<View Class='demo—box'> 
<view class='title'> 播 放 网 络 首 频 </view> 
<audio id="myAudio" poster="{{poster}}"” name="{{name}}" 
author="{ {author}}" src="{{src}t}™ controls loop></audio> 
<button size="mini" bindtap='"audioPlay’ > 播放 </button> 
<button size="minil'’ bindtap='audioPause'> 萄 停 </button> 
<button size=" mini' bindtap='audioSeek0'> 回 到 开头 </button> 

</view> 


WXSS (pages/demo05/audio/audio.wxss) 代码 如 下 : 
buttonit 


margin: lO0rpx; 


} 


JS (pages/demo05S/audio/audio.js) 的 代码 片段 如 下 : 


Page (1{ 
data: 1{ 
poster: ‘nttp://y.gtimg.cn/music/photo new/TOO2R300x30 


GyasSk.Jpg?max age—2230932000",， 
name: ' 此 时 此 刻 '， 
author: ' 许 欠 '， 
src: 'http://ws.stream.gqmusic.ggq.com/M500001lVfvsJ21xFqgb 
ffff82def4af4bl2b3cd93371d5eJ&uin=3468971220&vkey=6292F511 
9AB /ICA49FD113D632D313AC4858BACB8DDD29390671D3C601481D36E620!: 
AS5CCEFADD64 111160CAF 3E6A&fromtag=46" 

} ， 

audioPlay: function(options)} {| 
this.audliocCctx.playl()} 

ls 

audioPause: function(options) 1 
this.audioCtx.pause () 

ls 


audiosSeek0: function(options) 1 
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击 事 件 分 别 是 audioPlay、audioPause 和 audioSeek0， 这 3 个 日 定义 函数 均 
了 声明 。 

在 图 4-36 中 ， 图 (a) 为 页 和 面 初 始 状 态 ， 此 时 可 以 显示 首 频 图 片 、 歌 | 
前 首 频 处 于 0 分 0 秒 ; 图 (b) 是 单 击 了 “播放 ”按钮 后 的 效果 ， 此 时 播放 
续 ， 且 首 频 图 片上 的 按钮 图 标 友 生 了 改变 ; 图 (c) 是 单 击 了 “暂停 ” 按 和 钳 , 
放 到 0 分 41 秒 并 停止 ， 且 首 频 图 片上 的 按钮 图 标 义 切换 回 初 始 状 态 。 


16:49 16:50 
例题 DEMO se 例题 DEMG 
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5. 媒体 组 件 audio 的 简单 应 用 5. 媒体 组 件 audio 的 简单 应 用 5. 媒体 组 
播放 网 络 音频 播放 网 络 音频 拱 

名 4 iD00 Be ) We 

= a = Cn Bs 

播放 暂停 回 到 开头 播放 暂 保 回 到 开头 播放 

局 微 信 小 程序 开发 零 基础 入 门 二 微 信 小 程序 开发 零 基础 入 | 已 微 信 小 
(a) 页 面 初始 效果 (Cb) 正在 播放 效果 Ce 


图 4-36 ” 妹 体 组 件 audio 的 简单 应 用 


4.0.2 lmasgpe 


<image> 征 图 片 组 件 , 可 以 用 于 法 示 本 地 或 网 络 图 上 请, 其 献 认 宽 度 为 300 
该 组 件 对 应 的 属性 如 表 4-44 所 示 。 


表 4-44 image 组 件 属 性 


Fei Me Wa ,ft 


下 5 微 信 小 程序 开发 零 基础 入 门 


表 4-45 image 组 件 的 mode 属性 的 有 效 值 
值 说 明 
不 保持 纵横 比 缩放 图 片 ， 使 图 片 的 宽 高 完全 拉 伸 至 填 ; 


sspectEit 。 | 保持 纵 模 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 显示 出 来 
缩放 模式 将 图 片 显示 出 来 


于 


保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显示 1 
通常 只 在 水 平 或 垂直 方向 是 完整 的 ， 另 一 个 方向 将 会 : 
宽度 不 变 ， 高 度 自动 变化 ， 保 持原 图 宽 高 比 不 变 
top | 不 缩放 图 片 ， 只 显示 图 片 的 顶部 区 域 

不 缩放 图 片 ， 只 显示 图 片 的 底部 区 域 

不 缩放 图 片 ， 只 显示 图 片 的 中 间 区 域 

不 缩放 图 片 ， 只 显示 图 片 的 左边 区 域 


aspectF1ll 


top 
lett 
righ 
top left 不 缩放 图 片 ， 只 显示 图 片 的 左上 边区 域 
不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 


不 缩放 图 片 ， 只 显示 图 片 的 左下 边区 域 
不 缩放 图 片 ， 只 显示 图 片 的 右 下 边区 域 


【 例 4-23】 妹 体 组 件 image 的 简单 应 用 
WXML (pages/demo05/image/image.wWwxml)〉 的 代 人 片段 如 下 : 


CE 
裁剪 模式 不 缩放 图 片 ， 只 显示 图 片 的 右边 区 域 


. <view class='title'>5 .媒体 组 件 image 的 简单 应 用 </view> 
. <Vliew Class='demo—box'> 


<V1IEeEW class='title'>(1) 缩 放 模 式 : scaleToFill</view> 
<image src="'{{src}}' mode='scaleToFill'></image> 


<view class='title'> 丰 保持 纵横 比 绩 放 图 片 ， 使 图 片 完 全 适应 </view> 


. </view> 
. < leW Class='demo—box'> 


V1EeEW class='title'>(2) 缩 放 模 式 : aspectFit</view> 


E <image src="{{srct}" mode= aspecLEit" ></ image> 

0. <view class='title'> 傈 持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 蛙 示 出 
11 .< 过 /View> 
12.<view Class='demo—box'> 
下 党 <View Class='title'>(3) 绩 放 模式 : aspectFill</view> 
14 <image src="'{{src}}'" mode='"'aspectFill'></image> 
15 Yl1EW class='titlLe'> 保 持 纵 模 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显 
16.</vVview> 
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户 La la 请 


.所 VIEW Class='demo—box'> 


<view class='title>(7) 裁 天 模式 : center</view> 


<ijmage src="'{{src}}'"' mode='center'></image> 


<view class='title'> 不 迪 放 网 片 ， 只 显示 图 片 的 中 国 区域 </view> 


.过 /TiewW> 


<VIeW Class="'demo—box'> 
<view class-'title'>(8) 裁 肝 模 式 : Left</view> 
<image src="'{{src}}'" mode=']eft'></image> 
<view class='title'> 不 缩 放 图 片 ， 只 显示 图 片 的 左边 区 域 </view> 


</view> 
<Vliew Class='demo—box'> 
<V1iew class='title'>(9) 裁 且 模 式 : right</view> 
<image src="{{src}}' mode="'right'></image> 
<VieEwWw Class='title" > 不 绩 放 图 片 ， 只 显示 图 片 的 右边 区 域 </view> 


</view> 


<view class='title'>(10) 裁 闻 模 式 : top left</view> 
<image src="'{{src}}'" mode='top left'></image> 
<Vview Class="'title" > 不 缩放 疼 片 ， 只 显示 图 片 的 左上 边区 域 </view> 
</view> 
<V1iew Class='demo—box'> 
<view class='title'>(11) 裁 及 模式 : top right</view> 
<image src='{{src}}' mode='top right'></image> 
<view Class="'title" > 不 编 放 图 片 ， 只 显示 图 上 厂 的 右上 边区 域 </view> 
</view> 
<View Class="'demo—box'> 
<view class='title'>(12) 裁 到 模式 : bottom left</view> 
<image src="'{{src}}'" mode='bottom left'></image> 
<view Class="'title" > 不 风 放 图 片 ， 只 显示 图 片 的 左下 边区 域 </view> 


</view> 


<V1IeEwW class='title'>(13) 裁 六 模式 : bottom right</view> 
<image src="'{{src}}'" mode='top left'></image> 
<View Class='title'’ > 个 顷 放 图 片 ， 只 显示 图 片 的 右 下 边区 域 </view> 


</jview> 


WXSS (pages/demo05/image/image.wxss) 的 代码 卢 段 如 下 : 


limagel 
width: 260rpx; 
height: 260rpx; 
1 
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图 4-37 《 蒙 娜 丽 莎 》 素 材 图 


运行 效果 如 图 4-38 所 示 。 


(1) 缩放 模式 : scaleTofill 


不 保持 纵横 比 缩放 图 片 ， 使 图 片 完 全 适应 
(a) 缩放 模式 : scaleToFill 


(3) 缩放 模式 : aspectFill 


wr 


保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 
能 完全 显示 出 来 


(c) 缩放 模式 ，aspectFill 


(5) 裁剪 模式 : top 


(2) 缩放 模式 : aspt 


保持 纵横 比 缩放 图 片 ， 使 图 
全 显示 出 来 


(b) 缩放 模式 : a 


(4) 缩放 模式 : width 


宽度 不 变 ， 高 度 目 动 变 化 ， 保 
比 不 变 


(d) 缩放 模式 : wid 


(6) 裁剪 模式 : boti 


t 第 


(9) 裁 勇 偿 式 : right (10) 裁剪 模式 : 1 


不 颖 放 图片 ， 只 显示 图 片 的 右边 区 域 不 缩放 图 片 ， 只 显示 图 上 
(1) 裁剪 模式 ，right q) 裁 前 模式 : 


(11) 裁 勇 模式 : top right (12) 裁剪 模式 : bo 


不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 不 缩放 图 片 ， 只 显示 图 上 


(k) 裁 甬 模式 : top right ( 裁剪 模式 : tx 


(13) i bottom right 


a. Sad 


(m) 裁 胸 模式 : bottom right 
4-38 ( 续 ) 
【代码 说 明 】 
本 示例 在 image.wxml 中 声明 了 13 个 <image> 组 件 ， 其 际 材 来 源 了 


image.wxss 中 声明 <image> 组 件 的 尺寸 为 260rpxx260rpx。 根据 <image> 组 件 
同 ， 共 形成 13 种 缩放 或 裁剪 效果 。 
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属 性 名 
danmu-list 


danmu-btn 


enable-danmu 


autoplay 
loop 


muted 


page-gesture 


direction 


show-proegress 
show-fullscreen-btn 
show-play-btn 


show-center-play-btn 


说 明 
_ObjectAmay | | 弹 幕 列表 
是 否 显示 弹 疾 按钮 ， 只 在 初始 化 
效 ， 不 能 动态 变更 


Ee 本 是 否 展示 弹 幕 ， 只 在 初始 化 时 有 效 
oolean alse 动态 变更 


后 
月 已 

是 否 自动 播放 

是 

是 下 攻 刘 揪 


于 本 在 非 全 屏 模式 下 是 否 开 局 之 度 与 
oolean alse | 调节 手势 


设置 全 屏 时 视频 的 方向 , 不 指定 则 

“i 宽 高 比 自动 判断 。 其 有 效 值 为 0 ( 
竖 回 ) 、90 (〈 屏 幕 道 时 针 90”) 、 
(屏幕 顺 时 针 90”) 


若 不 设置 ， 当 宽度 大 于 240 时 才 会 
_ Boolean | true | 是 否 显示 全 屏 按钮 

是 否 显示 视频 底部 控制 栏 中 的 播放 
是 否 显示 视频 中 间 的 播放 按钮 


Boolean false 


enable-proegress-gesture 是 否 开 局 控制 进度 的 手势 


objectF1t 


poster 
bindplay 
bindpause 
bindended 


bindtimeupdate 


bindfullscreenchange 


当 视 频 大 小 与 video 容器 大 小 不 一 
视频 的 表现 形式 。 其 中 ,contain 为 人 
fill 为 填充 ， cover 为 蓝 兰 

视频 封面 的 图 片 网 络 资 源 地 址 ， 
controls 属性 值 为 false， 则 设置 p 
无 效 

EventHandle | | 当 开始 /继续 播放 时 触发 play 事件 
EventHandle | | 当时 停 播放 时 触发 pause 事 人 
EventHandle | | 当 播放 到 末尾 时 触发 ended 事件 


当 播 放 进 度 变 化 时 触 友 ，event.det 


EventHandle {currentTime，duration} ， 人 触发 频 
250ms 一 这 
当 视 频 进 入 和 退出 全 屏 时 和 触 : 
EventHandle event.detall = {iullScreen, directio 


{HY 第 


WXSS (pages/demo05/video/video.wxss) 的 代码 片段 如 下 : 


5 


videol 
width: 100%;» 


[5 


JS (pages/demo0S$/video/video.]s) 的 代码 片段 如 下 : 


1. Page ll 
2 data: I 
src: 'http://wxsnsdy.tc.gqgq.com/105/20210/snsdyvideodownl 


280201010421301f02016304022334804102ca902ce620bl1l241b i126bt 
40128825340400&bizid=1]1023&hy=SH&fileparam=302c02010104235. 
d9302042/e3c4ff02024ef20203le8d /1f02030f4240020404Ja320al 


4 danmuList: | 

要 { 

6. text: ' 第 1s 出 现 的 弹 幕 ， 
color: ‘yellow', 

Ee time: 1 

全 上 

10. { 

1. text: ' 第 3s 出 现 的 弹 舌 '"， 
2 COlor: "Purple", 

1 3 time: 3 

14. } ] 

13. 上 

16. onReady: function() I 

i this.videoContext=~=wx.createVideoContext ("myVideo") 
18. } 

LE 


运行 效果 如 图 4-39 所 示 。 


hat 全 21:44 | ehat 过 21:45 ls [mh 


全 | 晤 DEMO 例题 DEMO 十 注重 DO, 
第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 
5. 媒体 组 件 video 的 简单 应 用 5. 媒体 组 件 video 的 简单 应 用 5. 媒体 年 
播放 网 络 视 频 播放 网 络 视 频 
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T 7 微 信 小 程序 开发 零 基础 入 门 


【代码 说 明 】 

本 示例 选用 了 微 信 官方 提供 的 一 段 网 络 视 频 作 为 <video> 组 件 的 视频 来 
的 data 中 定义 了 danmuList 用 于 显示 两 段 弹 幕 。 在 图 4-39 中 ， 图 (a) 为 
时 视频 加 载 完毕 需要 手动 单 击 播放 ; 图 (b) 和 图 (c) 分 别 为 播放 到 第 1 3 


4.0.4 camera 


<camera> 是 系统 相机 组 件 ， 从 基础 库 1.6.0 开始 支持 ， 低 版 本 需要 做 : 
测试 时 ， 需 要 用 户 授 权 scope.camera。 该 组 件 对 应 的 常用 属性 如 表 4-47 所 ; 


4-47 camera 组 件 常用 属性 


属 性 名 说 明 
mode 有 效 值 为 normal、scanCode 
device-position 前 置 或 后 营 ， 值 为 front 或 back 
flash 闪光 灯 ， 值 为 aato、on、off 
扫 码 识别 区 域 ， 格 式 为 区 y, w, hj， 其 
是 相对 于 camera 显示 区 域 的 左上 角 , Ww 
区 域 宽 度 , 单位 为 px, 仅 在 mode="scar 
时 生效 


人 人鱼 站 在 韭 下 党 终 上 上 订 地/ 柄 [ni 县 由 
me ne ii 


stan-alea 


binderror 当 用 户 不 允许 使 用 摄像 尖 时 触 友 


力 识 别 到 一 维和 码 时 触发， 
ER 在 成 功 识别 到 一 维 码 时 和 触发 


mode="scanCode" 时 生效 
注意 : 更 多 用 法 见 第 6 章 “ 媒 体 APT”。 


【 例 4-2S】 媒体 组 件 camera 的 简单 应 用 
WXML (pages/demo0S/camera/camera.WXximl ) 的 代码 卢 段 如 下 : 


. <View class='title'>5 .媒体 组 件 video 的 简单 应 用 </view> 

. <Vlew Class="'demo—box'> 

<view class='"'title'> 开 局 相机 </view> 

<Camera device—position="back™” flash="off" style="width: 
300px; "></camera> 

<button type="primary" bindtap="takePhoto"> 扣 照 </button> 


户 La fa 请 


10。 onLoad: tunctlion (opPt1LIons) { 

ls this.ctx=wx.createCameraContext () 
2 号 

T3354} 


运行 效 末 如 图 4-40 所 示 。 


例题 DEMO 


第 4 章 小 程序 组 件 
5. 媒体 组 件 video 的 简单 应 用 


开局 相机 


"代码 小 实验 " 要 使 用 你 
的 摄像 头 ， 是 否 允 许 ? 


多 微 信 小 程序 开发 堆 基 础 入 门 


(a) 用 户 授 权 访 问 摄像 头 (b) 开局 相机 
4-40 ”媒体 组 件 camera 的 简单 应 用 


【代码 说 明 】 

本 示例 在 camera.wxml 声明 了 一 个 <camera> 组 件 用 于 开局 相机 ， 其 状 ; 
及 关闭 闪光灯 效果 。 在 <camera> 组 件 下 方 放 置 了 一 个 <button> 按 钮 ， 并 为 ; 
事件 takePhoto， 用户 单 击 “ 拍 照 ” 按 钮 后 即 可 实现 拍照 功能 。 在 该 按钮 下 - 
用 于 显示 拍摄 完成 后 的 预览 照片 。 

在 图 4-40 中 ， 图 (a) 是 用 户 初 次 访问 示例 页 面 ， 需 要 用 户 授权 访问 提 
用 户 授 权 后 的 页 面 效 果 ， 此 时 可 以 单 击 按钮 进行 拍照 ， 图 (c) 为 拍照 后 的 
在 按钮 下 方 出 现 了 刚才 担 摄 的 预览 图 片 。 


”和 
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属 性 名 
covers 
polyline 
circles 
controls 
include-pomts 
show-location 
bindmarkertap 
bindcallouttap 
bindcontroltap 
bindreglonchange 
bindtap 


bindupdated EventHandle 


说 有 明 
即将 移 除 ， 请 使 用 markers 香 代 
路 线 


即将 废弃 ， 请 使 用 cover-view 和 丛 代 

缩放 视野 以 包含 所 有 给 定 的 坐标 操 

显示 向 有 方 同 的 当前 定位 点 

单 击 标记 点 时 触 友 ， 会 返回 marker 的 id 

单 击 标记 点 对 应 的 气泡 时 触发 ， 会 返回 marker 
单 击 控件 时 触发 ， 会 返回 control 的 id 

当 视 时 发 生变 化 时 触发 

单 击 地 图 时 触发 

在 地 图 渔 染 更新 完成 时 触发 


例如 生成 一 个 北 泵 故 吕 博物 阮 的 地 图 ，WXML 代码 如 下 : 


<map latitude='39.917940" longitude="'116.397140'></map> 


注意 : 如 果 经 纬度 不 确定 ， 
index.html ) 进行 查询 。 


可 以 使 用 腾讯 坐标 拾取 器 〈http:/lbs.qq. 


<map> 组 件 默认 大 小 为 300 像素 x150 像素 ， 该 尺寸 可 以 重新 自 定 义 ， 


1]. mapl 

让 width: 100%» 

3 height: e600rpx; 
Ee 


最 终 效果 如 图 4-41 所 示 。 


- 库 大 竺 


号 院 这 
-1 景山 公园 
国家 机 关 外 
引 务 官 理 局 长 

街 


表 4-49 markers 利用 属性 


属性 | 说 明 | 类 型 | 必 填 | 备 。 注 


marker 单 击 事件 回调 会 返回 此 
jd 标记 点 id Number 个 marker 设置 Number 类 型 的 id， 
时 有 更 好 的 性 能 


TT ER 
enh 间 贞 下， 并 采 为 160150 
title 标注 点 名 


rotate ”| 旋转 角度 顺 时 针 旋 转 的 角度 ， 范 围 为 0- 
alpha ”| 标注 的 透明 度 默认 为 1， 无 透明 ， 范 围 为 0 
width 标注 图 标 宽度 默认 为 图 片 实际 宽度 
height ”| 标注 图 标高 度 默认 为 图 片 实际 高 度 
callout | 所 站 闪 支持 的 属性 见 表 4-50, 可 识别 换行 


label 为 标记 所 劳 边 增加 标签 文 持 的 属性 见 表 451, 可 识别 换行 


nchor ”| 经 玮 度 在 标注 图 标的 | obiee 示 | 人 记录 , x 表示 横向 (0 一 1) ，y 
锚 点 ， 默 认为 底 边 中 点 | 有 | fx: .5,y: 二 表示 底 边 中 点 。 其 : 
callout 


在 自 定义 标记 点 的 上 方 可 以 使 用 callout 属性 显示 气泡 窗口 ， 其 包含 的 属 


表 4-50 ” ”callout 常用 属性 


color String 
oniSize Nambe 
borderRadis Nomber 
bgColor 月 等 String 
paddine Number 
display BYCLICK': 蛙 击 显示 ; 'ALWAYS': 和 营 显 String 
textAlien 区 本 对 齐 方 式 ， 有 效 人 为 lef、right、center String 


label 
在 目 定 义 标记 点 劳 可 用 label 属性 增加 标签 ， 其 包含 的 属性 如 表 4-51 上 


表 4-51 label 常用 属性 
属 性 说 了 明 类 
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4.1.2 polyline 


polyline 属性 用 于 指定 一 系列 坐标 点 ， 从 数组 第 一 项 连 线 至 最 后 一 项 ， 


表 4-52 ”polyline 常用 属性 
属 性 备注 
points 经 纬度 数组 [ {latitude: 0, longitude: 01] 
用 8 位 十 六 进 制 数 表 示 ， 
2 HE ~ : 

ce 下 的 珊 反 
ET ET 

默认 false， 开 发 者 工具 罩 
Boolean 否 2 
ER TI 了 


borderColor | 边框 线 的 颜色 
borderWidth 线 的 厚度 


4.7.3 circles 
circles 属性 用 于 在 地 图 上 显示 圆 形 区 域 ， 其 包含 的 属性 如 表 4-53 所 示 


表 4-53 circles 常用 属性 


备注 


alITOWL Ine 


fillColor 填充 闫 色 String i 用 8 位 十 六 进 制 数 表示 ， 后 | 
”| 例如 #000000aa 

radius 

strokeWidth | 描 边 的 宽度 


【 例 4-26】 地 图 组 件 map 的 简单 应 用 
WXML (pages/demo06/map/map.wxml) 的 代码 片段 如 下 : 


说 
上 氏 


color 描 边 的 凑 色 String 不 | 用 8 位 十 六 进 制 数 表示 ， 后 | 
”| 例如 #000000aa 


明 


1. <view class='title'>6. 地 图 组 件 map 的 简单 应 用 </view> 


Ch A 


‘DD 于] 


> 二 
PD， 


Page (tt 
data: I 
latitude: 3S9.93L 71940., 
longitude: ll6e.3971140, 
markers: [1{ 
001", 
latitude: 39.917940, 
longitude: lloe.3971140, 
iconPath:'/images/demo06/location.png', 
label:1 
content:' 故 富 博 物 院 ' 
} 


上 
}, 


regilionChange: function(e) 1 
console.1og(' regionChange 被 触发 ， 视 野 发 生变 化 。'); 


运行 效果 如 图 4-42 所 示 。 
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【代码 说 明 】 

本 示例 在 map.wxml 中 声明 了 一 个 <map> 组 件 用 于 显示 地 图 ， 并 在 mal 
式 为 宽 100%、 高 600rmpx。 在 map.js 的 data 中 设置 了 经 纬度 坐标 和 标记 点 4 
思 《〈 标 记 点 id、 图 标 、 标 签 文 本 内 容 )。 

在 图 4-42 中 ， 图 (a) 是 页 面 初始 效果 ， 由 该 图 可 见 标记 点 图 标 和 标 : 
内 容 都 正常 显示 ; 图 (b) 是 移动 地 图 的 视野 效果 ， 地 图 可 以 在 指定 尺寸 
任意 改变 视野 ， 图 (c) 是 移动 地 图 后 Console 控制 台 输 出 的 内 容 。 


人 C 用 8 上 画布 组 件 ii 


<canvas> 为 国 布 组 件 ， 其 默认 尺寸 是 宽度 为 300px、 高 度 为 225px。 
该 组 件 对 应 的 第 用 属性 如 表 4-54 所 示 。 


表 4-54 canvas 组 件 常用 属性 


属性 名 | 类 型 | 默认 值 说 上 明 


canvas-id sting | canvas 组 件 的 唯一 标识 人 符 


| 当 在 canvas 中 移动 且 有 绑 定 了 
disable-scroll false 滚动 以 及 下 拉 刷 新 


bindtouchstart EventHandle | 手指 触 操 动作 开始 
bindtouchmove EventHande | 手指 触 换 后 移动 

bindtouchend EventHande | 手指 触 拘 动作 结束 
bindtouchcancel EventHande | 手指 触 操 动 作 被 打 断 ， 例 如 来 


z z 手指 长 按 500ms 之 后 触发 ， 
'something wrone'} 
例如 : 


<Canvas canvas-id="myCanvas" style="border:1rpx solid™ ></can 


上 述 代 码 表示 声明 了 一 个 市 有 lrpx 宽 、 黑色 实 线 边 框 的 画布 , 其 canva 
需要 注意 的 是 , 同一 页 面 中 的 canvas-id 不 可 重复 .如果 使 用 一 个 已 经 出 
该 canvas 杯 窒 对 应 的 国 布 将 被 隐藏 日 不 再 正常 工作 。 


运行 效果 如 图 


4-43 所 示 。 


当前 只 是 画布 的 简单 应 用 ， 读 者 可 查看 第 11 章 “ 界 面 API” 学 习 关 于 


本 章 主 要 介绍 小 程序 网 络 API 的 相关 应 用 ， 小 程序 允许 使 用 本 章 介 绍 | 
第 三 方 服务 器 进行 通信 ， 包 括 发 起 请 求 和 文件 的 上 传 /下 载 。 
本 章 子 习 目标 
。 了 解 小 程序 /服务 器 架构 : 
e 掌握 服务 器 域名 配置 和 临时 服务 器 部 者 ; 
。 掌握 wx.request() 接 口 的 用 法 ; 
。 学 握 wx.uploadFile0 和 wx.downFileO 接 口 的 用 法 。 


小 程序 允许 使 用 网 络 API 和 服务 问 进 行 明 信 , 包括 发 起 请求 、 文 件 的 上 
5.1.1 -小 程序 /服务 如 架构 


小 程序 和 服务 器 通信 的 架构 也 可 以 称 为 C/S 架构 ， 即 客户 端 /服务 器 
构 。 小 程序 和 服务 器 的 通信 息 理 大 致 如 图 5-1 所 示 。 


1. 发 起 请 求 


3. 返回 数据 
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(1) 默认 超时 时 间 和 最 大 超时 时 间 都 是 60s。 

(2) request、uploadFile、downloadFile 的 最 大 并 发 限制 是 10 个 。 

(3) 网 络 请 求 的 referer header 个 可 设置 。 其 格式 冉 定 为 “https://servicev 
{versionY/page-frame.html”， 其 中 {fappid} 为 小 程 厅 的 appi1d，f{version} 为 小 ; 
本 号 为 0 表示 为 开 友 有 版、 体验 版 以 及 审核 版 本 ,版 本 写 为 devtools 表示 为 
为 正式 版 本 。 

(4) 小 程 厅 进 入 后 台 运 行 后 〈 非 前 项 聊天 )， 如 果 在 5s 内 网 络 请 求 没 - 
误 信 息 fail interrupted; 在 回 到 前 台 之 前 ， 网 络 请 求 接口 调用 都 会 无 法 调用 

关于 服务 器 返回 

1) 返回 值 编码 

小 程序 会 目 动 对 BOM 头 进行 过 滤 , 且 建 议 服务 旨 返 回 值 使 用 UTF-8 编 
编 翁 ， 小 程序 会 宪 试 进行 转换 ， 但 是 会 有 转换 失败 的 可 能 。 

2) 回调 

只 要 成 功 接收 到 服务 嚣 返回， 无论 statusCode 是 多 少 ， 都 会 进入 succ 
者 根据 业务 逻辑 对 返回 值 进行 判 断 。 

关于 JSON 语法 格式 

小 程序 网 络 API 在 友 起 网 络 请 求 时 使 用 JSON 格式 的 文本 进行 数据 交 : 

JSON (JavaScript Object Notation) 是 基于 JavaScript Programming ]】 
ECMA-262 3rd Edition - Dec1999 的 一 个 子 集 ， 是 一 种 轻 量 级 的 数据 交换 格 
立 于 语言 的 文本 格式 , 易于 人 们 阅读 和 编写 ; 但 是 也 使 用 了 类 似 于 C 语言 寡 
C#、Java、JavaScript、Perl、Python 等 ) 的 习惯 ， 因 此 也 易于 机 器 解析 和 
JSON 成 为 理想 的 数据 交换 语言 。 

JSON 字 从 早退 剃 有 两 种 构建 形式 ， 一 是 “名 称 / 值 ”对 的 集合 ， 二 是 

1) “名 称 / 值 ” 对 的 集合 

“名 称 / 值 ”对 (name/value pair) 的 集合 在 不 同 的 计算 机 语言 中 可 以 被 理 
记录 (record)、 结 构 (struct)、 字 上 典 (dictionary )、 哈 希 表 (hash table )、 有 和 
或 天 联 数 组 (associative array) 等 。 

名 称 可 以 由 开发 者 目 定义 ， 例如 studentID、usemame 等 ; 值 是 目 定 义 : 
共有 以 下 6 种 类 型 的 取 值 。 

e。 string: 字符 串 ， 需 要 用 引号 括 起 来 ， 例 如 hello'。 

a Timhear。 渤 植 。， 柄 nn 133. 


值 
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例如 : 
/ /1 .单个 名 称 / 值 对 


Var JSsonl={x: 123} 


//2 .多 个 名 称 / 值 对 
Var Sornz—=1XlL: 123 KZ: 
/13. 峰 套 组 合 的 名 称 / 值 对 
Var JSson3=1 
ee de 
区 过 > heiio”™, 


Dj]， 


pe 本 
wl lees 
We ld 
} 


“ello,. xd: 


truel} 


如 果 想 获得 json3 中 的 yl 的 但 false， 写 法 是 json3.x3.yl。 
这 里 以 做 信用 尸 信息 数据 为 例 ， 返 回 的 JSON 文本 如 下 : 


detail: 1 
userinfos | 
nickname: ' 张 二 '， 
gender: 1l1, 
city: Shanghal 


2) 值 的 有 序列 表 


值 的 有 序列 表 在 绝 大 部 分 计算 机 语言 中 均 可 以 被 理解 


为 数组 (array )。 


值 的 有 序列 表 过 向 使 用 中 插 写 包含 里 和 的 全 部 内 容 ， 示 例 格 式 如 下 : 


但 15 
I 


值 N 


上 |】 微 信 小 程序 开发 零 基础 入 门 


{username: “wamngwu ， password: “189 city: “XUancCnheng - } 


如 果 想 要 获取 json3 中 第 1 个 用 户 所 在 的 城市 ， 写 法 是 json3[0].citv。 
S.1.2 ”服务 如 域名 配置 


每 一 个 小 程序 在 与 指定 域名 地 址 进行 网 络 通 信 前 都 必须 将 该 域名 地 二 
台 白 名 捍 中 。 

配置 流程 

小 程序 开发 者 登录 mp.weixin.qq.com 进入 管理 员 后 台 ， 单 击 “ 设 置 ” 
下 的 “服务 器 域名 ”中 添加 或 修改 需要 进行 网 络 通 信 的 服务 器 域名 地 址 ，- 


和 微 信 公众 平台 | 小 程序 


人 首 而 设置 
</》 开发 管理 基本 设置 和 。 开发 设置 ”上 第 三 方 服务 。 ”接口 设置 。 ”开发 者 工具 
Wi | 

上 ”用户 奥 众 ee 
加 歼 气 分 怕 开发 者 ID -7 
因 福 本 消息 开 二 者 ID 
总 ”过 早 消息 

禹 让 后 IDD 得 序 ID 有 日 3 
后 Hire 
2 ic, 1 BppSecrette sy 
咏 ] 推广 A 


设置 


© 
届 
更 
划 
由 


加 EYE 
ntitps ree-ap, Hweath er 


5-2 ”服务 兹 域名 配置 


开 友 者 可 以 填 入 目 己 或 此 三 方 的 服务 器 域名 地 址 ， 但 在 配置 时 需要 注 . 
(1) 域名 只 文 持 https (request、uploadFile、downloadFile) 和 wss 
协议 。 


SS 


校 验 失 败 ， 则 请 求 不 能 成 功 发 起 。 

因此 开发 者 如 果 选 择 上 自己 的 服务 占 ， 需 要 在 服务 器 上 目 行 安装 HITP: 
方 服务 占 则 确保 其 HTTPS 证 书 有 效 即 可 。 小 程序 对 证 书 的 要 求 如 下 : 

(1) HTTPS 证 书 必 须 有 效 。 证 书 必须 被 系统 信任 ， 部 署 SSL 证 书 的 | 
书 颁发 的 域名 一 致 ， 证 书 必须 在 有 效 期 内 。 

(2) iDOS 不 支持 自 签名 证 书 。 

(3) 10S 下 的 证 书 必 须 清 足 平 采 App Transport Security (ATS) 的 要 求 。 

(4) TLS 必须 文 持 1.2 及 以 上 版 本 。 部 分 旧 Android 机 型 还 未 文 持 
HTTPS 服务 器 的 TLS 版 本 文 持 1.2 及 以 下 版 本 。 

(5) 部 分 CA 可 能 不 被 操作 系统 信任 (例如 Chrome 56/57 内 核对 Wo 
书 限制 》， riche di 和 各 系统 的 相关 通告 。 

由 于 系统 限制 ， 不 同 平台 对 于 证 书 要 求 的 严格 程度 不 同 。 为 了 保证 小 ; 
有 了 证 书 配置 ， 并 使 用 相关 工具 检查 现 有 证 书 是 否 : 

图 跳 过 域名 校 验 

如 果 开 发 者 暂时 无 法 登记 有 效 域 名 ， 可 以 在 开发 和 测试 环节 暂时 跳 过 : 
法 是 在 微 信 web 开发 者 工具 中 找到 右上 角 的 “详情 ”按钮 ， 单 击 打开 浮 窗 、 
验 合 法 域名 、web-view (业务 域名 )、TLS 版 本 以 及 HTTPS 证 书 ” 复 选 框 ， 


| zi le ER 


上 但 测 计 ”有 旺 读 云 详 博 


代码 小 实验 
ppIC wxl130 A eda 
本 地 目录 CASES 从 出 版 桂 \ 微 信 小 程序 六 门 .， 打 开 


广 履 系统。 CG AppData\Losals 莹 | 信 ,.， 打开 


上 次 预览 ”8 KB ( 上 是 期 五 16:14 ) 


上 次 上 传 “元 
项 目 设 重 域名 迟 筷 胶 讯 云 状 志 
调试 基础 库 1.9.94 0.00% v 


ES6 转 ES5 : 
上 传代 码 时 样式 自动 补 全 
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Tomcat 等 任意 一 亚 服 务 顺 软件 进行 安 闻 部 普 ， 以 及 选用 PHP、Node.Jjs、 工 
言 进行 后 端 开 友 。 
这 里 以 phpStudy 2016 苦 闻 软件 〈 包 含 了 Apache 和 了 PHP) 为 例 ， 部 着 
(1) 下 载 安装 包 ， 在 PC 端 中 双击 安装 。 
(2) 完成 后 司 动 Apache 服务 占 ， 如 图 5-4 所 示 。 
(3) 在 WWW 目录 下 创建 目 定义 目录 ， 例 如 mimiDemo。 
至 此 临时 部 普 完 毕 ， 用 户 可 以 随时 更 改 服 务 器 上 的 目录 地 址 和 PHP 文 


phpPstudy 2016 


运行 模式 一 一 fif 逐 本 
系统 服务 
f 非 服务 模式 


应 用 | 
MyS 人 QL 管理 器 ] 


证 其 他 选项 菜单 


5-4 ”启动 Apache 服务 器 


此 时 模拟 服务 右 已 经 局 动 。 

网 络 请 求 

服务 右 的 WWW 目录 束 古 根 目录 , 它 的 网 络 地 址 是 “http://localhost/ ”或 
开发 者 可 以 在 根 目录 下 目 行 创建 目录 和 文件 , 例如 在 miniDemo 中 创建 了 t# 
网 络 请 求 地 址 就 是 “http://localhost/miniDemo/test.php ”。 

PHP 文件 的 返回 语句 是 echo， 例 如 : 


1. <2php 
-i echo ' 网 络 请 求 成 功 ! '， 
人 和 


这 样 小 程序 将 会 收 到 引号 里 面 的 文字 内 容 。 开 发 者 也 可 以 直接 用 浏览 


El ml ds sy | A 下 


5-1 Wx.request 国 数 的 OBJECT 参数 


参数 | 说 了 明 
ul 开发 者 或 第 三 方 服务 器 接口 地 | 


data ct/String/Arr 3 请 求 的 参数 
header Object 和 设置 请 求 的 header， 在 header 
(其 中 content-type 默认 为 appli 


DELETE、TRACE、CONNEC 
dataType J 默认 值 为 json。 如 果 设 为 json， 
据 做 一 次 JSON .parse 
-一 设置 响应 的 数据 类 型 ， 合 法 值 : 
默认 值 为 text， 最 低 版 本 为 1.7 
收 到 服务 器 成 功 返 回 的 回调 函 : 
failO 接口 调用 失败 的 回调 函数 


口 is 
行 》 


success0O 返 回 的 参数 如 表 5-2 所 示 。 


表 5-2 success() 返 回 参 数 
参数 说 有明 
data Object/String/ArrayBuffer | 开 友 者 服务 占 返 回 的 数据 
statusCode 开发 者 服务 器 返回 的 HITP 状态 码 
header 开发 者 服务 器 返回 的 HTTP Response Head 


wX.Iequest(OBJECT) 示 例 代 码 如 下 : 


WwWX -TeGUeSt (({ 
url: 'https://test.com/',// 仅 为 示例 ， 并 非 真 实 的 接口 地 址 
data: I 


二 23 / /数据 的 key 和 wvalue 由 开 友 者 目 定 义 
V: 1456， // 这 里 的 数据 仅 为 示例 


}, 
SUCCesSSsS: function(res) 1 
console.1log (res.data) /1 返回 的 数据 
} 
}) 


下 悦 。 微 信 小 程序 开发 零 基础 入 门 


表 5-3 requestTask 对 象 的 方法 


注意 : 从 基础 库 1.4.0 开始 支持 ， 低 版 本 需要 做 兼容 处 理 。 


requestTask 对 和 象 的 示例 代码 如 下 : 


const requestTask=wx.regquest (1{ 
url: 'https://test.com/"'，// 仅 为 示例 ， 并 非 真实 的 接口 地 址 
data: | 
x: "123' ， // 数 据 的 key 和 wvalue 由 开发 者 目 定 义 
i // 这 里 的 数据 仅 为 示例 
} 
success: function(res) { 
Console.log (res.data) 
} 
1 
requestTask.abort({) // 取 消 请 求 任 务 


【 例 S-1】 网 络 请 求 的 简单 应 用 
WXMIL (pages/demo01/request/request.wxml) 文件 代码 如 下 : 


.<view class='title7r>1l1 .网 络 请 求 request</view> 

. <View Cass= aqemo 一 boX > 

<view Class='title'>wx.regquest (OBJECT) </view> 

<input placeholder=' 请 输入 您 需要 查询 的 单词 ' bindblur='wordB1t 
<button type="primary™ bindtap="search"> 查 蕙 </button> 
<view class='status'> 释 久 : {{result}}</view> 

。< /View> 


下 


WXSS (pages/demo01/request/request.wxss)〉 文件 代码 如 下 : 


inputy,buttont{ 
margin: lorpx; 

} 

-satusl| 
margin: Jorpx; 
text—align: left; 

} 


下 


TS (nacoec/demaoafl rennect/irennect es WF 本 HPN 下. 


辽 实 
A 


| 


2 | 
| 者 


f 


https://api.shanbay.com/pbpadc/search/ '， 


工 > . if (word=="") { 
16. wx.ShowToastl(t{ 
TS title: 单词 不 角 
18. 1con: ‘none' 
3 }) 

20. } 

2 / /发 起 网 络 请 求 
2 else 1 

a WX.Iegquestl(t1 
24. a 

Fe data: | 

?0. woOord: word 
21. }, 

28. SUCCeSS : 

29. 

30: 

3 

六 } 

33. }) 

34. } 

人 } 

36 - }) 


预 宽 效果 如 图 5-5 所 示 。 


生生 生硬 NE 人 二 at 到 二 党 工 


nDENMOG 
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1. 网 络 请 求 request 


Wx.request(lOQBJECT) 


El 1 DT 
上 才 
站 = 三 和 | 


释义 : 待 查询 


避 微 信 小 程序 开发 零 基础 入 |] 


呈 甩 (®) 


function(res) I 
console.1log(res.data) 

et TesHlt =- res datadata= cn definTtion defn 
that.setDatal({ result: 


11:02 


例题 DEMO 


第 5 章 网 络 API 
1. 网 络 请 求 request 


Wx.requestrQBJECT) 


4% 


resujijt 1}) 


IO, 


第 5 
1. 网 络 i 


Wx.requ 


让 


释义 : nm. 苹果 
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【代码 说 明 】 

本 示例 通过 使 用 wx.request 接口 回 第 三 方 开源 API 有 友 起 网 络 请 求 关 
request.wxml] 中 包含 了 <input> 输 入 框 、<button> 按 钮 和 <view> 组 件 分 别 用 - 
单词 和 显示 中 文 释义 。 在 request.js 的 data 中 初始 定义 查询 结果 {{result}} 
并 初始 化 页 面 变 量 word 为 空白 内 容 。 然后 为 输入 框 绑 定 自 定义 函数 wordB 
事件 ， 并 喝 新 word 值 ; 为 按钮 绑 定 目 定 义 图 数 searchO 监 听 tap 单 击 事件 ， 
则 给 出 错误 提示 ， 有 内 容 则 发 起 网 络 请 求 ， 并 使 用 setData0 函 数 将 查询 结 : 
{{result}} 中 ， 使 其 可 以 演 染 到 request.wxml 页 面 上 。 

在 图 5-5 中 ， 图 (a) 为 页 面 初 始 效 末 :; 图 (b) 十 尚 未 输入 早 词 束 蛙 1 
效果 ， 此 时 会 出 现 错误 提示 ; 图 (c) 是 输入 单词 apple 后 单 击 “ 查 询 ” 按 
可 见 此 时 成 功 发 起 了 网 络 请 求 拿 到 了 释义 数据 ; 图 (d) 为 查询 单词 成 功 时 
出 的 结果 ， 由 该 图 可 见 除 了 中 文 释义 外 还 包含 了 其 他 数据 ， 开 发 者 可 以 根 


SR 


文件 传 软 主 要 包含 文件 的 上 传 和 下 载 功 能 ， 其 中 文件 上 传 功能 需要 配 - 
用 ; 文件 下 载 功 能 使 用 开 友 者 服务 右 或 第 三 方 服 务 右 均 可 。 


5.3.1 文件 的 上 传 


文件 上 传 请 求 

小 程序 使 用 wx-uploadFile(OBJECT) 可 以 将 本 地 资源 上 传 到 开 肥 者 服务 
客户 端 发 起 一 个 HTTPS POST 请 求 到 服务 器 ， 其 中 content-type 为 multipal 

OBJECT 参数 的 说 明 如 表 5-4 所 示 。 


表 5-4 wx.uploadFile 函数 的 OBJECT 参数 


参数 说 明 

url 开发 者 服务 器 url 

filePath 要 上 传 文件 资源 的 路 径 

ee 本 是 “| 文件 对 应 的 key， 开 发 者 在 服务 器 端 通过 这 个 1 
的 二 进 制 内 容 

header HTTP 请 求 Header， 在 header 中 不 能 设置 Refe 


ES = Pe Y= i, 


资源 的 临时 文件 路 径 后 可 以 通过 此 接口 将 本 地 资源 上 传 到 指定 服务 器 。 示 1 


1 。WX-ChooseImage (1 

2 success: function(res) I 

3 Var temprFilePaths=res.tempFilePaths 

2 wx.uploadFile(l 

3 url:'https://example.weixin.gqq.com/upload'，// 仪 为 示例 ， 
c filePath: temprilePaths[0|, 

name: ‘file', 

9 formData:i1 


3 "USeT : ‘test" 

10. }, 

lB SUCCeSS: function(res})t1 
于 var data=res.data 

133 } 

LR: 上 

下 } 

了 和 Eb 


上 传 任务 对 象 
wx.uploadFile(OBJECT) 接 口 返回 一 个 uploadTask 对 象 , 通过 该 对 象 可 | 
变化 事件 以 及 取消 上 传 任务 。uploadTask 对 象 的 方法 如 表 5-6 所 示 。 


表 5-6 uploadTask 对 象 方法 


万 法 参 数 取 

onProeressUpdate() 监听 上 传 进度 变化 
abort() wy 中 断 上 传 任务 

onProgressUpdate(0) 人 返回 参数 的 说 明 如 表 5-7 所 示 。 

表 5-7 onProgressUpdate() 返 回 参 数 
有 砚 

progress 上 传 进度 百分比 

totalBytesSent 己 经 上 传 的 数据 长 度 ， 单 位 为 

totalBytesExpectedToSend 预期 需要 上 传 的 数据 总 长 度 ，: 


uploadTask 对 和 象 示例 代码 如 下 : 


1 。 const uploadTask~=wXxX .upPploadFile ll 


入 (3 微 信 小 程序 开发 零 基础 入 门 


<image wx:if='{{src}}" src=Iffsrcllr mode='widthFix'></im 

<button bindtap=" "chooseImage™ > 选择 文件 </button> 

<button type="primary™ bindtap="uploadFile"> 开 始 上 传 </buttt 
</view> 


下 


WXSS (pages/demo02/upload/upload.wxss) 文件 代码 如 下 : 


] 。 buttont 
margin: ll]orpx; 


[5 


3 | 


JS (pages/demo02/upload/upload.js〉 文 件 代码 如 下 : 


Page (1 
data: I 
src: "， // 上 传 图 片 的 路 征地 址 
} ， 
/ /选择 文件 


chooseImage: function() 1 
var that=this 
wX .ChooseImadge ( { 


count: 1，/ /默认 为 9 


多 一 上 La fu 请 


| 一 
人 


sizeType: ['original', 'compressed'],// 可 以 指定 是 原 图 还 是 压 
TH sourceType: ['album'， 'camera']， ，// 可 以 指定 洋 源 是 相册 还 ; 
| Success: function(res}) 1 
13: / /返回 选 定 照片 的 本 地 文件 路 径 列 表 
下 村。 let SrcC=Tes .tempE1I1ePaths[L0j 
下 二 that.setDatal({ src: src 1}) 
下 } 
11. }) 
18. } ， 
19. // 上 传 文件 
?0 uploadFile: function() 1 
-| var that=this 
22 // 获 取 图 片 路 径 地 址 
23 let src=this.data.src 
24 / /尚未 选择 图 片 
25 i {SsTC==""™Y { 
之 6 WwWX .ShowIoast (1{ 
光 8， title: 请 先 选 择 文 件 ! '， 
28 ICon: ‘none' 
23. }) 
30. } 
31 1 1/ 稚 禹 上传 女 件 


41/- 
48. 
49. 
J0. 
SE. 
a 
ee 


Ga RR J 


| 一 


睛 必 忆 
Ch Wr a a De 


和 


9 
20. 
a 


和 


Oi 


console.1log(' 上 传 进度 '"， res.pIrogress) 

console. Logt 己 经 上 传 的 数据 长 度 ' ，res . totalBytesSsen 

console.1og(' 了 预期 需要 上 传 的 数据 总 长 度 ' ， res .上 totalBytesE 芭 
1 


服务 需 站 PHP (http:/WlocalhostminiDemompload.php) 文件 代码 如 下 : 


.<2php 


it (liempty(s FIEES["ftile" 1}})1{ 


/ /获取 扩展 名 
spathinfo=~pathinfol(s$ FILES["'file']['name"]); 
sexename=strtolower (spathinfol[l'extension']).; 

// 检 柚 扩 展 名 

if (sexenamel!l='png' && Fexename!l="'Jpg' && Fexenamel!-= 


echo (' 韭 法 扩展 名 !'); 


} 
/ /检测 通过 
1] sel 
$imageSavePath="'image/' .unidqid() .'.'.s$exename; // 创 建文 { 
/ /移动 上 传 文件 到 指定 位 置 
if(move uploaded file(s FILES['file"']['tmp name’' |], $im 
echo ' 上 传 成功 !'; 

} 

} 

} 

el]lsel 
echo "上 传 失 败 !'，; 

2> 


预 多 效果 如 图 5-6 所 示 。 
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WEDEMNMO -ev。 HEDEMO 
第 5 章 网 络 API 第 5 章 网 络 API 第 : 
2 文件 上 传 /下 载 2. 艾 件 上 传 /下 载 2. 
wx.uploadFile(OBJECT) wx.uploadFilet OBJECT) wx.upl 
选择 文件 


4。 微 信 小 程序 开发 零 基 础 入 门 “站 k 


[R Console Sources Network Security Storage AppData Wxml Sensor Trace 
( | top v | Filter Default levels ™ 


| 了 Wed Aug 22 2818 15:18:68 GMT+8888 〈 中 国标 准时 间 ) 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS | 
|a PP 工具 未 模 验 合法 域名 、web-view《 业 务 域 着 ) 、TLS 限 本 以 及 HTTPS 证 书 。 
上 传 进度 166 
已 经 上 传 的 数据 长 度 18353 
据 期 震 要 上 传 的 数据 总 长 度 18353 
Vv {statuscode: 288, data: " L/W", errMsg: "uploadFilLe:ok"} 
data: “上 和 传 成 功 1" 
errMse:; "uploadFile:ok" 
statusCcode: 288 
bb proto_: Object 


Cd) 文件 上 传 过 程 中 Console 控制 台 的 输出 内 容 
图 5-6 ( 续 ) 


【代码 说 明 】 

本 示例 在 upload.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 选择 图 片 利 
目 定 义 图 数 分 别 是 chooseImage() 和 uploadFile()。 如 琳 疝 未 选择 文件 束 上 传 
择 好 图 片 文 件 后 会 在 页 面 的 <image> 组 件 中 显示 出 来 ， 在 图 片 选择 完成 后 ! 
按钮 将 调用 wx-uploadFileO 接 口 进行 上 传 。 服 务 器 端 使 用 PHP 文件 upload. 
先 检 测 图 片 文件 扩展 名 是 否 符 合 要 求 ， 检 测 通 过 后 将 文件 重 命名 并 存放 在 | 
的 image 文件 夹 中 。 用 户 可 以 通过 检测 服务 占 指 定 文 件 夹 中 是 否 有 上 传 的 | 
否 成 功 。 

在 图 5-6 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 选择 文件 ; 图 (b) : 
果 ， 此 时 指定 的 图 片 将 显示 在 页 面 上 ; 图 (c) 是 文件 上 传 成 功 的 消息 提 亏 
过 程 中 Console 控制 台 的 输出 内 容 , 该 内 容 是 由 uploadTask 对 象 的 监听 事 借 
实现 的 ， 由 该 图 可 见 输出 语句 只 在 下 载 完 毕 ( 下 载 进 度 为 100%) 时 出 现 
与 文件 大 小 和 网 速 有 关 ， 不 同 设 备 、 文 件 和 网 络 环境 可 能 存在 差异 。 


5.3.2 文件 的 下 载 

文件 下 载 请 求 

小 程序 使 用 wx.downloadFile(OBJECT) 可 以 从 服务 璐 下 载 文 件 资源 到 了 
Ii 上 如 老 -8 所 天 。 


表 5-9 success() 返 回 的 参数 


参数 说 了 明 


tempFilePath 临时 文件 路 径 ， 下 载 后 的 文件 会 存储 到 一 
statusCode 开发 者 服务 器 返回 的 HTTP 状态 码 


下 载 文 件 的 原理 是 客户 端 直 接 发 起 一 个 HTTP GET 请 求 ， 返 回 文件 的 
要 注意 的 是 ， 本 地 临时 路 径 文 件 在 小 程序 本 次 启动 期 间 可 以 正常 使 用 ， 如 ' 
主动 调用 wx.saveFile0 才 能 在 小 程序 下 次 启动 时 访问 得 到 。 

wx.downloadFile(OBJECT) 示 例 代 码 如 下 : 


1. wx.downloadFilel(t 

a url: 'https://example.com/audio/123", /1/ 仪 为 示例 ， 并 非 真 实 的 : 

: success: function(res) I 

: 、 / /只 要 服务 器 有 了 啊 应 数据 ， 就 会 把 啊 应 内 容 写 入 文件 并 进入 success () 回 j 
// 靳 是 否 下载 到 了 想 要 的 内 容 

sy i (res.statusCodeQ==~—~200) 1 

6 - console.1lodg(res.tempEilePath) /7 文件 临时 路 径 地 址 

8 . 本 

二 -上 


下 载 任 务 对 象 

wx.downloadFile(OBJECT) 返 回 一 个 downloadTask 对 象 ， 通 过 downlos 
进度 变化 事件 以 及 取 澳 下 载 任 务 。 二 接口 从 基础 库 1.4.0 开始 文 持 ， 低 版 本 

downloadTask 对 象 的 方法 如 表 5-10 所 示 。 


表 5-10 downloadTask 对 象 方法 
方 。 法 
onProgressUpdate() 监听 下 载 进 度 变 化 


abortO 中 断 下 载 任务 
onProgressUpdate0O 返 回 参数 的 说 明 如 表 5-11 所 示 。 


表 5-11 ProgressUpdate() 方 法 参数 
参数 说 _ 明 
progress 下 载 进度 百分比 
totalBytesWritten 已 经 下 载 的 数据 长 度 ， 单 位 ; 
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【 例 $-3】 文件 下 载 的 简单 应 用 
WXML (pages/demo02/download/download.wxml) 文件 代码 如 下 : 


.<Vview class='titler>2 .文件 上 传 / 下 载 </view> 
。 <Vlilew Class='demo—box'> 


<view Class='title'>wx.downloadFile (OBJECT) </view> 
<block wx:1if={{isDownloadl}}'> 
<image mode='widthFix' src='{{src}}'></image> 
<button bindtap"reset"> 旭 和 </button> 
</block> 
<button wx:else type="primary™ bindtap="download"> 单 击 此 处 下 


. </view> 


JS (pages/demo02/download/download.js) 文件 代码 如 下 : 


Page (1 


- data: 1 


jsDownload: false 


}, 
/ /下 载 图 片 文件 
download: functiont(t) I 
var that=this 
/ /开始 下 载 
var downloadTask=wx.downloadFilerll 
url: ‘http://img06.tooopen.com/images/20180821/toooper 
562533875. jpg'"，// 用 户 可 日 行 更 换 
Success: function(res) 1 
// 只 要 服务 器 有 了 啊 应 数据 ， 就 会 把 啊 应 内 容 写 入 文件 并 进入 success ( 
// 壳 要 目 行 判断 是 耕 下 载 到 了 想 要 的 内 容 
i (res.statusCode===200) 1 
let src=res .tempEilePath/ /文件 的 临时 路 径 地 址 
that .setDatal(t 


SEC BSTC 
lisDownload: true 
}) 
} 
} 
}) 
// 任 务 对 象 监听 下 载 进度 


QownloaadITasK.onPFrOGETeSSUPdGate ( (res)=>1{ 
Console.1logl(" 下 载 进度 '， res -PIOgress) 
console.1logl(' 己 经 下 载 的 数据 长 度 !， res. totalBytesWritten) 
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全 EDEMIO 例题 DEMO . 


第 5 章 网 络 API 
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第 5 章 网 络 API 
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wx.downloadFile(OQBJECT) wx.downloadFile(OQBJECT) 


> SN 
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局 微 信 小 程序 开发 零 基 础 入 门 


(a) 了 页面 初 妈 效 果 (b) 立 件 下 载 成 功 


[x Console Sources Network Security Storage AppData Wxml Sensor Trace 
(yy) | top Vv | Filter Default levels 了 
7 Wed Aug 22 2618 12:696:48 GMT+8888 (中 国标 准时 间 》 配置 中 天 财 合 法 域 荐 、web-view《( 业 和 劳 域 件 》、TLS 所 
p> 工具 未 梳 驻 合法 域 扫 、wWeb-Vview(〈 业 芳 囊 知 ) 、TLS 版 本 以 及 HTTPS 证 书 . 
下 载 进度 16 
己 经 下 载 的 数据 长 度 3986 
据 期 需要 下 载 购 数据 总 长 度 23296 
下 载 进 度 166 
己 经 下 载 的 歼 据 长 度 23296 
预期 需要 下 载 的 数据 总 长 度 23296 


Cc) 文件 下 载 过 程 中 Console 控制 台 的 输出 内 容 
5-7 文件 下 载 的 简单 应 用 
【代码 说 明 】 


本 示例 在 download.wxml 中 使 用 wx:iif 和 wx:else 属性 切换 显示 内 容 。 兰 
加 于 一 个 下 趣 本 一 hinttan 二 对 和 白 守 WBE 涛 且 nwomlnad/ 人 站 当中 和 全" 


。 掌握 图 片 的 选择 、 预 览 、 信 息 获取 和 保存 的 方法 ; 
。 掌握 录音 oposite 

。 党 握 背 未 音频 管理 和 音频 组 件 控制 的 方法 ; 

e 掌握 视频 的 选择 、 保 存 和 组 件 控制 的 方法 : 

e。 掌握 相机 管理 器 的 用 法 ， 


6.1.1 选择 图 斤 


小 程序 使 用 wx.chooseImage(OBJECT) 从 本 地 相册 中 选择 图 片 或 使 用 相 
图 片 将 被 存放 在 设备 的 临时 路 径 ， 在 小 程序 本 次 启动 期 间 可 以 正常 使 用 。 
OBJECT 参数 的 说 明 如 表 6-1 所 示 。 


表 6-1 wx.chooselmage(OBJECT) 的 参数 


参数 说 明 

最 多 可 以 远 择 的 图 片 张 数 ， 甘 认为 9 
sizeType ”StringAmray | 否 original 为 原 图 ，compressed 为 三 缩 图 ，# 
0 i 本: 汪 album 为 从 相册 选 图 ，camera 为 使 用 相机 


a -王八 层 癌 | 医 | 此 和牛 林 和 下 | 堆 + 


保存 ， 需 要 主动 调用 wx.saveFileO 进 行 傈 存 ， 这 样 在 小 程序 下 次 局 动 时 才 和 月 
6.1.2 ” 预 质 图片 
小 程序 使 用 wx.previewImage(OBJECT) 预 宙 图 片 ，OBJECT 参数 的 说 昌 


表 6-2 wx.previewlImage(OBJECT) 的 参数 


对 数 | 类 型 | 浴 填 _ 说 上 明 


cmen 
rl 
Dil0 
compiee0 


当前 显示 图 片 的 链接 ， 如 末 不 填 则 默认 
需要 预 多 的 图 片 链 接 列 表 
接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 (调用 成 功 与 外 


6.1.3 ”获取 图 片 信息 
小 程序 使 用 wx.getImageInfo(OBJECT) 获 取 图 片 信息 ,OBJECT 参数 的 i 


表 6-3 wx.getlImagelnfo(OBJECT) 的 参数 


参数 [类 型 | 必需- 说 本 


图 卢 的 路 径 ， 可 以 是 相对 路 径 、 临 时 文件 路 径 、 


和 下。 | 络 图 片 路 径 
success() 接口 调用 成 功 的 回调 函数 


fail() 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执 咎 


success0O 返 回 参 数 的 说 明 如 表 6-4 所 示 。 


表 6-4 success() 返 回 参 数 


参数 说 明 
width 图 片 宽度 ， 单 位 为 px 
height 图 片 高 度 ， 单 位 为 px 
path 返回 图 片 的 本 地 路 径 
orientation 返回 图 片 的 方 同 
ype 返回 图 片 的 格式 


orientation 参数 时 说 明 加 表 6-5 有 所 示 。 


下 7 微 信 小 程序 开发 零 基础 入 门 


6.1.4 保存 图 片 


小 程序 使 用 wx.saveImageToPhotosAlbum(OBJECT) 保 存 图 片 到 系统 相 } 


scope.wWIitePhotosAlbum。 访 接口 从 基础 库 1.2.0 开始 支持 ， 低 版 本 需 做 菲 任 


参 


OBJECT 参数 的 说 明 如 表 6-6 所 示 。 


ei slo aaiasaaaiiiasalss asa Lit 


数 说 明 


图 卢 文 件 路 径 ， 可 以 是 临时 文件 路 径 也 可 以 ; 
四 EEC 支持 网 络 图 片 路 径 
Et 接口 调用 成 功 的 回调 函数 ,返回 String 类 型 二 
success() Function 用 结果 


fail() 


Function | 否 | 接口 调用 失败 的 回调 函数 


completeO ”Function | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 ] 


区 = 请 


] 本 


【 例 6-1】 媒体 API 图 片 管理 的 简单 应 用 
WXML (pages/demo0l/image/image.wxml) 文件 代码 如 下 : 


ETEaE3ETS 图片 管理 <VwEWw> 
. <View Cass= Qemo 一 DoX > 
<View Class='title'>wx.getLocation (OBJECT) </view> 
<button bindtap="chooseImage "> 选择 图 片 </button> 
<image src="'{{src}}' mode='widthFix'></image> 
<button type="primary™ Size='minir bindtap—"previewImage">»1 
<button type="pIrimary” SiZzZe="mini’ bindtap="getImageInfo"> 民 
<button type="primary” Size="'mini’ bindtap="saveImage"> 保 : 
. </view> 


JS (pages/demo01/image/image.js) 文件 代码 如 下 : 


Page ({ 


/ /选择 图 片 

chooseImage: function(}) 1 
var that=this 
wx.chooselmage (1 


count: 1，// 默 认为 3 


ee 下 人 -oTirit or HH [S| HB [I 


{eK 


2+. 有 

2 - } ， 

2 // 著 取 图 片 信息 

a getImagelInfo: functiont() 1 
es var that=this 

二 WwWX .detImadgeInfto( (| 

Sa 了 src: this.data.src, 

2 . success:function(res)t 
2 WwWX .ShowTIoast (1{ 

30. lcon: none', 

2 title: ' 先 :'+res.widtht+', 高 :'+res.height, 
32 - }) 

3 } 

34. }) 

32. }, 

36. / /保存 图 片 

SS savelmage: function() 1 

3 var that=this 

天 wx.SavelmageToPhotosAlbuml(l 
40. filePath: that.data.src, 
2 success:function(}ft 

We wiX.ShowIoast(l 

43. Litie * 杯 和 成功 1 

全 4- }) 

45. } 

46. } 

41. } 

48. }) 


真 机 预 多 效果 如 图 6-1 所 示 。 
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下 干 :38 
例题 DEMO 
第 6 章 媒体 AP| 第 
1. 图 片 管理 1 
图 片 管 理 的 综合 应 用 图 片 


宽 :1080; 高 :608 


@ 微 信 小 程序 开发 零 基础 入 站 怕 微 信 小 
Cd》 预览 图 片 效 果 Ce) 查看 图 片 信息 ( 


图 6-1 续 ) 


【代码 说 明 】 

本 示例 在 image.wxml 中 包含 了 一 个 <button> 普 通 按 钮 用 于 选择 图 三， ， 
是 chooseImage0; 还 有 3 个 <button> 迷 你 按钮 分 别 用 于 预 上 大、 和 码 询 信息 和 1 
目 定 义 图 数 分 别 是 previewlImage()、getImageInfo(O 和 saveImageO。 

在 图 6-1 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 尚未 选取 图 厂 ，3 个 迷你 按 外 
单 击 “选择 图 片 ” 按 钮 后 的 效果 ， 此 时 下 方 出 现 操 作 菜 单 可 以 从 相册 选 # 
图 (c) 是 图 片 选择 完毕 效果 : 图 (d) 是 单 击 “ 预 览 图 片 ” 按钮 后 的 效果 ; | 
厂 信 息 ” 按 钮 后 的 效果 ， 此 时 弹出 消 明 提示 框 招 述 图 瞩 的 宽 和 高 ; 图 (f) 五 
按钮 后 的 效果 ， 此 时 图 瞩 已 经 重新 被 你 存 到 手机 中 。 


上 ，、 工 口 IO am 六 TH HARI9 


方 。 法 说 明 
录音 停止 事件 ， 返 回 String 类 型 参数 tempFilePati 
onsStop() callback 时 路 径 


ee RE 己 录 制 完 指 定 帆 大 小 的 文件 ， 会 回调 录 首 分 片 结 ; 
onFrameRecorded() | callbac frameSize， 则 会 回调 此 事件 
onError() 录音 错误 事件 ， 返 回 String 类 型 参数 errMsg 表示 


其 中 start(options) 方 法 的 参数 说 明 如 表 6-8 所 示 。 
表 6-8 ”start(options) 方 法 的 参数 说 明 


属 ”性 说 明 
指定 录音 的 时 长 ， 单 位 为 ms， 如 果 传 入 
法 的 duration， 在 到 达 指 定 的 duration 捕 


ee 会 “| 动 停止 录音 , 其 最 大 值 为 600000 (10 分 
默认 值 为 60000 (1 分 钟 ) 

sampleRate 采样 率 ， 有 效 值 为 8000/16000/44100 

numberOfChannels 录 彰 通道 数 ， 有 效 信 为 1/2 

encodeBitRate 编 始 人 码 率 ， 有 效 值 见 表 6-9 


format 音频 格式 ， 有 效 信 为 aac/mp3 
指定 帆 大 小 ， 单 位 为 KB。 在 传 入 fram 
以 后 ， 每 录制 指定 帆 大 小 的 内 容 后 都 会 


es | 录制 的 文件 内 容 ， 车 不 指定 则 不 会 回 诺 
暂时 仅 支持 mp3 格式 
audioSource 指定 音频 输入 源 ， 默 认 值 为 'auto' 


采样 率 和 码 率 天 系 如 表 6-9 所 示 。 
表 6-9 采样 率 和 编码 码 率 关 系 


采 样 率 编码 码 率 
SUUU 16000 一 4800U0 
11023 16000 一 480U 
12000 24000 一 640U0| 
16000 24000 一 960U0| 
220>0 32000~— 12800 
24000 32000~— 12800 


32000 48000~— 1920(0 
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onFrameRecorded(callback) 回 调 结 果 说 明 如 表 6-11 所 示 。 


表 6-11 onFrameRecorded() 回 调 结 果 


属性 说 明 
frameBuffer AirayButfer 录 首 分 片 结 果 数 据 
isLastFrame 当前 帆 是 含 正章 录音 结束 表 的 


【 例 6-2】 媒体 API 录音 管理 的 简单 应 用 
WXML (pages/demo02/recorderTrecorderwxml) 文件 代码 如 下 : 


.<View class='title'>2. 了 录 首 管理 </view> 

. <View Class="'demo—box'> 

<view Class="title'S 录 首 官 理 骨 </View> 

<button type=" "pIrimary” SiZe= "mini’ bindtap="startn> 开 始 录 让 


<button type="primary” SizZe= mlLnIL pindtap="stop"> 停 止 录 首 : 


[i 


2 


JS (pages/demo02/recorder/recorder.]s) 文件 代码 如 下 : 


Page ({ 
/ /开始 录音 
start:function(}t 
const options=1{ 

duration: 10000, 
sampleRate: 44100, 
numberofcCchannels: 1, 
encodeBitRate: 192000 ， 


‘DD 全 国情 


format: aac', 

Ta: frameSize: 30 

i Be } 

a this.rm.start (options) 
13. 1s 

14. // 停 止 录 音 

15. stop:function'(})t 

T6. this.rm.stop'()} 

TR 


第 6 章 媒体 API 第 { 
2. 录音 管理 \ 2 
录音 管理 器 . 


入 小 * 


古 微 信 小 程序 开发 零 基础 入 门 


(a) 早 击 “开始 录 首 ” 控 乌 (b) 录音 过 程 


图 6-2 ”录音 害 理 的 简单 应 用 


【代码 说 明 】 

本 示例 在 recorder.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 开始 和 候 . 
定义 图 数 分 别 是 start0 和 stop0; 在 recorderjs 的 onLoadO0 中 生成 录音 管理 孝 
诈 监 听 onStopO 图 数 获取 录音 完毕 后 音频 的 临时 路 径 地 址 ， 然 后 进行 播放 。 

在 图 6-2 中 , 图 (a) 为 首次 录音 效 末 ,此 时 需要 手动 授权 人 允许 用 户 使 尺 
是 录音 过 程 ， 此 时 右上 和 角 会 出 现 闪 烁 的 话 简 图 标 ; 图 (ec) 是 停止 录音 后 的 : 
标 消 失 并 且 目 动 播 放 刚 才 的 录音 内 容 。 


= 


首 频 根据 播放 性 奈 可 以 分 为 百 景 首 频 和 前 台 首 频 。 百 景 首 频 在 小 程序 1 
继续 在 后 台 播 放 。 


6.3.1 ”和 录音 频 管 理 


人 微 信 小 程序 开发 零 基础 入 门 2 


属 性 说 明 
音频 的 数据 源 ， 默 认为 空 字 符 串 ， 当 设置 了 新 的 src 
i 和 时 会 自动 开始 播放 ， 目 前 支持 的 格式 有 m4a、aac、 
mp3、wav 
startTime 音频 开始 播放 的 位 置 (单位 为 $s) 
/ 音频 缓冲 的 时 间 点 ， 仅 保证 当前 播放 时 间 点 到 此 时 间 
点 内 容 已 缓冲 
音频 标题 ， 用 于 做 原生 音频 播放 器 的 音频 标题 ， 原 生 
title String 音频 播放 器 中 的 分 享 功能 分 享 出 去 的 卡片 标题 也 将 使 
用 该 值 
专辑 名 ， 原 生 音 频 播 放 器 中 的 分 享 功能 分 享 出 去 的 卡 
片 简介 也 将 使 用 该 值 
a 歌手 名 ， 原 生 音频 播放 器 中 的 分 享 功 能 分 享 出 去 的 卡 
去 S 片 简介 也 将 使 用 该 值 
封面 图 url， 用 于 做 原生 音频 播放 器 的 背景 图 ， 原 生 音 
coverImgUrl | String 频 播放 器 中 的 分 享 功能 分 享 出 去 的 卡片 配 图 及 背景 也 
将 使 用 该 图 
页 面 链接 ， 原 生 音频 播放 器 中 的 分 享 功能 分 享 出 去 的 
本 卡片 简介 也 将 使 用 该 值 
i i 音频 协议 ， 默 认 值 为 http'， 设 置 为 nls 则 可 以 文 持 播放 


HLS 协议 的 直播 音频 


backsgroundAudioManager 对 象 的 方法 说 明 如 表 6-13 所 示 。 


表 6-13 backgroundAudioManager 对 象 方 法 


方法 说 明 
playO ”| 播放 
pause0 | 暂 个 
stop() | 停止 
seek() 味 : 转 到 指定 位 置 ， 单 位 为 s 
onCanplayO 痛 景 普 频 进入 可 以 播放 状态 ， 但 不 保证 后 面 可 以 
onPlay() 背 晕 音频 播放 事件 
onPause() 痛 景 音 频 暂 仓 事 件 
onstop() 育 景 音频 俘 止 事件 
onEnded0 背景 音频 自然 播放 结束 事件 
onTimeUpdate() 背景 首 频 播 放 进 度 更 新 事件 


onPrev() 用 户 在 系统 音乐 播放 面板 单 击 上 一 曲 事件 〈iDS o 


DY 


DD ~ 上 靖 


1 
44 
下 过 二 
13. 
] 4. 
1 
i166. 
A 
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WXMIL (pages/demo03/bgAudio/bgAudio.wxml〉 文件 代码 如 下 : 


<View class='titler>3- 音 频 管 理 </view> 

<Vliew Class="'demo—box'> 
<view class='tit1le'> 痛 景 音频 管理 </view> 
<button type="pIrimary” SizZe= mlInI- bindtap="plavyn"> 播 放 < /br 
<button type="primary” size©~= mlInlI- pindtap="pause"> 和 暂停 </ 


</view> 


JS (pages/demo03/bgAudio/bgAudio.js) 文件 代码 如 下 : 


Page (1 

// 初 始 化 育 景 音频 

initialAudio:function()t 
let bgAudioManager=this.bgAudioManager 
bgAudioManager.title=' 此 时 此 刻 ' 
bgAudioManager .epname=' 此 时 此 刻 '" 
bgAudioManager.singer=' 许 笑 ' 
bgqAudioManager.coverImgUrl='http://y.gtimg.cn/music/photcoc 
X300MOO00003rsKF44GyasSsk .JjJpg' 
bgAudioManager.src='http://ws.stream.dqqmusic.gqgq.com/MS5OI 
qb.mp32?guid=ffffffff82def4af4bl2b3cd9337d5e7&uin=346897. 
D51EI1E384E061FFO2C31F/16658E5C81F5594D561F2E88B854E81CAAI 
E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'// 设 置 了 si 

}, 

/ /开始 播放 

play: function(} 1 
this.bgAudioManager.play() 

}, 

/ /效仿 播放 

pause: function() 1 
this.bgAudioManager.pause() 

}, 

onLoad: function(options) 1 
this.bgAudioManager=wx .getBackgroundAudioManager() 


this.1initialAudiot() 


正四 ” 微 信 小 程序 开发 零 基础 入 门 


第 6 音 媒体 API 
3. 音频 管理 


背景 音频 管理 
E33 


避 微 信 小 程序 开发 零 基础 入 门 


御 j iPhone 
Fa 此 时 此 刻 
“a 诈 剖 一 此 时 此 刻 


Ca) 页 面 初始 效果 Cb) 小 程序 进入 后 台 
图 6-3 ”背景 音频 管理 的 简单 应 用 
6.3.2 ”音频 组 件 控制 


小 程 厅 使 用 wxcreateInnerAudioContextO 创建 并 返 内 部 aud 
innerAudioContext， 谤 接口 从 基础 库 1.6.0 开始 支持 ， 低 版 本 需 做 若 容 处 理 
innerAudioContext 对 象 的 属性 说 明 如 表 6-14 所 示 。 


表 6-14 innerAudioContext 对 象 属性 


属性 
STC 音频 的 数据 链接 ， 用 于 直接 播放 
startTime 开始 播放 的 位 置 〈 单 位 为 s) ， 默 认为 0 
autoplay 是 合 目 动 开始 播放 ， 默 认为 false 


loop 是 否 循环 播放 ， 默 认为 false 


是 否 导 循 系统 静音 开关 , 当 此 参数 为 false 时 ， 
obeyMuteSwitch Boolean | 即使 用 户 打 开 了 毅 音 开关 ， 也 能 继续 友 出 声 


表 6-15 innerAudioContext 对 象 方法 


方法 党 地 

nm 而 

本 

on0 BE 

seek() 踪 转 到 指定 位 置 ， 单 位 为 S 

destroyO 销 贤 当前 实例 

onCanplay0 音频 进入 可 以 播放 状态 ， 但 不 保证 后 面 可 以 流畅 

onPlay() 音频 播放 事件 

onPausel) 首 频 暂 俘 事件 

onStop() 音频 停止 事件 

onEnded0 音频 自然 播放 结束 事件 

onTimeUpdate() 音频 播放 进度 更 新 事件 

onErrorO 音频 播放 错误 事件 

和 音频 加 载 中 事 作 ， 当 音频 因为 数据 不 足 ， 需 要 停 
加 载 时 会 触发 

onSeekingO 首 频 进行 seek 操作 事件 

onSeeked0) 音频 完成 seek 操作 事件 

offtCanplayO 取消 监听 onCanplay 事件 

offPlayO 取消 监听 onPlay 事件 

offPause() 取消 监听 onPause 事件 

offstopO 取消 监听 onStop 事件 

offEnded0) 取消 监听 onEnded 事件 

offTimeUpdateO 取消 监听 onTimeUpdate 事件 

offError(O) 取消 监听 onError 事件 ， 并 返回 errCode 

offWaiting() 取消 监听 onWaiting 事件 

offSeekingO 取消 监听 onSeeking 事件 

offSeeked() 取消 监听 onSeeked 事件 


说 明 : errCode 的 说 明 与 6.3.1 中 backgroundAudioManager 对 象 的 相同 
【 例 6-4】 媒体 API 音频 组 件 控制 的 简单 应 用 
WXML (pages/demo03/audioCtx/audioCtx.wxml)〉 文件 代码 如 下 : 

1. <view class='titler>3 -音频 管理 < /view> 


二 。<VLeEeW Class='demo—box'> 
本 二 站 


了 了 微 信 小 程序 开发 零 基础 入 站 


guid=ffffffff82def4af4bl2b3cd933/dJe /i&tuin~=34689/1220g&vkey~=62921 
384E061FFO2C31F /116658E2C81F232394D261F2E88B824E8]CAAB /806D2E4F1( 
33Cl1e6F3FACI06DIAB] /2DE8600B3 /E43FAD&fromtag=46" 


audioCtx.onPlay( (1) 一 >1{ 

8. console.1log(' 开 始 播 放 ') 
9. }) 

10. audioCtx.onPpause( (res)=>1 
| console .1log(' 敬 停 播放 ') 
12. }) 

1 audioCtx.onSsStopl( (res)=>1{ 
14. console.1log(' 停 止 播 放 ") 
1> - }) 

le6. 1}, 


17. // 开 始 播 放 

18. Play:tunction() 1{ 

> this.audioCtx.playl) 
20 - } ， 

21. // 暂 停 播放 

22. pause: function(}) { 

之 村 this.audioCtx.pause () 
“年 - ky 

25. // 俘 止 播 放 

过 看- ‘Stop: Functiond}t 


2 this.audiocCctx.stopt) 

28. 上 

29. onLoad: functionl(options}) 1{ 

-0 - this.audioCtx~=wx.createInnerAudioContext () 
人 this.1initialAudiol) 

3 

33.1) 


运行 效果 如 图 6-4 所 示 。 
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【代码 说 明 】 

本 示例 在 audioCtx.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 播放 、 售 
应 的 目 定义 函数 分 别 是 play0O、stopO0 和 pause0O; 在 audioCtx.js 的 onLoad0 函 
上 下 文 对 象 ， 并 调用 目 定义 函数 imitialAudio0 初 始 化 音频 播放 。 

在 图 6-4 中 ， (a) 为 页 面 初始 效果 ， 此 时 音频 会 自动 播放 图 (b 
后 Console 控制 台 的 输出 内 容 ， 由 该 图 可 见 首 频 的 播放 、 蜀 停 和 停止 事件 站 


6.4.1 ”选择 视频 


小 程序 使 用 wx.chooseVideo(OBJECT) 拍 摄 视频 或 从 手机 相册 中 选 视 频 
文件 路 径 。OBJECT 参数 的 说 明 如 表 6-16 所 示 。 


表 6-16 wx.chooseVideo(OBJECT) 的 参数 
参数 说 明 


. - | album 指 从 相册 选 视频 ，camera 指使 用 相机 拭 
i ed ple 


compressed 和 是否 讨 贿 所 选 的 视频 源 文 件 ,默认 值 为 true， 般 
maxDuration 担 摄 视频 的 最 长 担 摄 时 间 ， 早 位 为 秒 ， 最 长 支 
success() 接口 调用 成 功 ， 返 回 视 频 文 件 的 临时 文件 路 径 
fail0) 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 图 数 《〈 调 用 成 功 与 否 都 执 : 


success0O 返 回 参 数 的 说 明 如 下 。 

e tempFilePath: 选 定 视频 的 临时 文件 路 径 。 

e duration: 选 定 视频 的 时 间 长 度 。 

e size: 选 定 视频 的 数据 重大 小 。 

e height: 返回 选 定 视频 的 长 。 

e width: 返回 选 定 视频 的 宽 。 

南 要 注意 是 ，wX.chooseVideo0 多 得 的 视频 仅 能 在 小 程序 局 动 期 间 临 时 
仔 ， 需 要 主动 调用 wx.saveFile0 进 行人 怀 存 ， 这 样 在 小 程序 下 识 局 动 时 才能 Y 


时 微 信 小 程序 开发 零 基础 入 门 


6.4.3 ”视频 组 件 控 制 


小 程 厅 使 用 wx.createVideoContext(videolId,this) 创 建 并 返回 视频 上 下 文 ; 
videoContext 通过 videold 和 一 个 video 组 件 绑 定 ， 通 过 它 可 以 操作 一 个 Vic 
在 目 定 义 组 件 下 ， 第 二 个 参数 传 入 组 件 实例 this， 以 操作 组 件 内 的 <vi 
videoContext 对 象 的 方法 说 明 如 表 6-18 所 示 。 


表 6-18 ”videoContext 对 象 方法 
万 法 参数 说 明 
play0 播放 
pauseO 千 


宫 

seekO 踪 转 到 指定 位 置 ， 单 位 为 

sendDanmu() 发 送 弹 幕 ，danmu 包含 两 个 属性 ， 即 text 和 color 

playbackRate() rate 设置 倍速 播放 ， 文 持 的 倍率 有 0.5、0.8、1.0、1.25. 
-el 区 = 进入 全 屏 , 可 传 入 {direction} 参 数 ( 从 1.7.0 版 本 起 支 

requestFullScreen() 无 详 见 video 组 件 

exitFullSscreen() 退出 全 斌 


【 例 6-$】 媒体 API 视频 管理 的 综合 应 用 
WXMIL (pages/demo04/videoCtx/videoCtx.wxml)〉 文件 代码 如 下 : 


1. <view class='title'>4 .视频 管理 </view> 

2. <VIeW Class="'demo-—box'> 

2 <view class='title'> 视 频 营 理 综合 应 用 </view> 

2 <button bindtap="chooseVideo"> 选 择 视 频 </button> 

2 <Video 1d="myVideo" src="{{src}}" enable—danmu danmu—btn con 
6 <button type=" "pIrimary” SizZe= "mini’ pindtap"play"> 播 放 < /bt 
| <button type=" "primary” Size= "mini’ pbindtap"pause"> 芹 停 </k 
De <button type="pPIrimary” Size= "mini’ bindtap="saveVideo"> 保 - 
了 <input placeholder=" 请 在 此 处 填写 弹 科 内容" bindblur="bindInpui 
lO. <button type="pIrimary'" bindtap="bindSendDanmu "> 发 送 弹 幕 </hpbi 
11.</view> 


WXSS (pages/demo04/videoCtx/videoCtx.wxss) 文件 代码 如 下 : 


| 
border: lrpx solid lightblue; 
3 heioaBnt: SO0rpxs 


12.Page (1{ 

13. // 选 择 视频 

14. chooseVideo: function() 1 

[Es var that=this 

16. WwWX .ChooseVidadec (1{ 

下 SourceType: [ alpum ， ”Camera | ， 
1 起 maxDuration: 60, 

有 camera: "back'"', 

20. success: function(res) 1!{ 
a that.setDatalt 

src: res.tempFilePath 
23. }) 

24. } 

29. }) 

<6. 4 

27. // 开 始 播 放 

28. playvy: functiont(} 1 

2 this.videoContext -PT ay 
30. |， 

31. // 暂 停 播放 

32- Pause: functijon() 1 

本 this.videoContext .pause () 
34. 上， 

35. // 保 存 视频 

36. SaveVideo: function() I 

Ds Var src~=this.data.src 

38. WX.SaveVideoToPhotosAlbuml(t! 
人 filePath: src, 

4 Success: function(res) 1 
< wxXx.ShowTIToast (1{ 

title: ' 保 存 成 功 ! 1 ， 
43. }) 

44. } 

45. 1 

46- 上 v 

47. inputValue: '! '，// 弹 基文 本 内 容 
48. // 更 新 弹 幕 文本 

49. bindinputBlur: functiont{(e) { 
SO - this.inputValue=e.detail .value 
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在 图 6-5 中 ， 图 (a) 为 里 击 “选择 视频 ”按钮 后 的 效 末 ， 此 时 可 以 现 : 
人 图 (b) 十 视频 选择 完毕 后 的 效果 ， 此 时 预 虎 图 会 出 现在 视频 区 
中 〈c) 是 单 击 “ 有 太 大 强攻 ”按钮 后 的 效果 ， 此 时 可 以 友人 大 随机 颜色 的 多 条 
是 单 击 “ 保 存 视频 ”按钮 后 的 效果 ， 此 时 视频 已 经 重新 被 保存 到 手机 中 。 


小 程序 可 以 使 用 wxg:createCameraContext(this) 创建 并 返回 canms 
cameraContext， 访 对象 将 与 页 面 中 的 <camera> 组 件 绑 定 ， 通 过 和 它 可 以 操作 对 
其 语法 格式 如 下 : 


Const ctx=~=wx.createCameraContext () 


注意 : 一 个 页 面 只 能 有 一 个 <camera> 组 件 。 在 自 定义 组 件 下 ， 参 数 伟 
以 操作 组 件 内 的 <camera> 组 件 。 


cameraContext 对 象 的 方法 如 表 6-19 所 示 。 
表 6-19 cameraContext 对 象 方法 
方 法 参 数 说 明 
takePhoto0 拍照 ， 可 指定 质量 ， 成 功 则 返 
startRecord() 开始 录像 
stopRecordO 结束 录像 ， 成 功 则 返回 封面 与 


takePhoto0 的 OBJECT 参数 如 表 6-20 所 示 。 


表 6-20 一 一 一 OBJECT 参数 


参数 说 。 明 


quality 0 成 像 质 量 ， 信 为 high、normal、low， 


success() Ee 接口 调用 成 功 的 回调 函数 ，res={ ten 
fail0 i | 接口 调用 天 败 的 回调 函数 


接口 调用 结束 的 回调 函数 〈 调 用 成 已 


允 | 六 


ID 


ID 


complete() Function 


参 


司 jj 微 信 小 程序 开发 零 基础 入 门 


表 6-22 stopRecord() 方 法 的 OBJECT 参数 


数 说 明 


success() 接口 调用 成 功 的 回调 函数 ，res={ tempThumbPath 


failO) 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 


导 La To 靖 


【 例 6-6】 媒体 API 相机 管理 的 简单 应 用 
WXML (pages/demo05/camera/camera.wxml) 文件 代码 如 下 : 


. <view class='title'>5. 相 机 管理 </view> 


. 过 WEW Class='demo—box'> 


<View class='title'> 了 录像 功 能 应 用 </view> 

<Camera device—position="back” flash="off" style="width: 
300px; "></camera> 

<button wx:1if="{{isRecording}}" type="primary"” bindtap=" "si 
录像 </button> 

<button wx:else type="pPrimary"™ bindtap="startRecord"> 开 始 ; 


<video hidden="{{isHidden}}" src="'{{src}t}" controls></vid 


8. </view> 


FF 
NDO,' 


JS (pages/demo05/camera/camera.js〉 文件 代码 如 下 : 


| 


data: I 
1sRecording: false, 
isHidden: true 
} ， 
/ /开始 录像 
startRecord: function() { 
var that=this 
that.setDatal({ isRecording: true, isHidden: true |}) 
this.ctx.startRecordt(t 
// 超 时 目 动 结束 
timeoutCallback (res) { 
that.setDataltl 


isRecording: false, 
Pe PE Ee A = = ee pd Te 


28. Src: res.tempVideopPath, 


人 isHidden: false 
30. }) 

1 i 

3z. 人 

33. 上， 


34. onLoad: function (options} { 


/ /更 新 视频 路 征地 址 
// 显 示 video 组 件 


this.ctx~wx.createCameraContext () 


36s 1 
了 7 


运行 效果 如 图 6-6 所 示 。 


"代码 小 实验 "要 使 用 你 
的 摄像 头 ， 是 否 允 许 ? 


不 允许 允许 


(a) 页 面 初始 效果 


例题 DEMO 有 
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5. 相机 管理 


录像 功能 应 用 


久 微 信 小 程序 开发 要 基础 入 门 


(b) 正在 录像 


例题 DEMO 


微 信 小 程序 开发 零 基础 入 门 2 


【代码 说 明 】 

本 示例 在 camera.wxml 中 包含 了 <camera> 和 <video> 组 件 分 别 用 于 显 ; 
的 视频 ; 男 有 两 个 <button> 按 钮 分 别 用 于 开始 和 结束 录像 ， 这 两 个 按钮 使 月 
属性 确保 每 次 只 显示 需要 的 那 一 个 ， 它 们 对 应 的 目 定义 录 数 分 别 ; 
stopRecord()。 在 camera.js 的 data 中 定义 初始 时 隐藏“ 结束 录像 ”按钮 不 
onLoad() 孙 数 中 创建 相机 上 下 文 对 象 ctx 用 于 管理 视频 的 录制 。startRecord 
“结束 录像 ”按钮 并 进行 录制 ， 当 录制 超时 30 秒 时 结束 录制 ; stopRecord0. 
前 的 了 录制， 并 使 用 setData0 方 法 将 录制 完成 的 临时 视频 路 任 地 址 更 新 到 <vi 
性 中 。 

企图 6-6 中 ， 图 (a) 为 页 面 初始 效 末 ， 此 时 需要 用 户 授权 访问 摄像 头 
“开始 录像 ”按钮 后 的 效果 ， 此 时 最 多 可 以 录制 30 秒 ; 图 〈c) 是 录像 结束 
下 方 会 多 出 视频 播放 器 ; 图 (d) 是 播放 临时 视频 的 效果 。 


文件 API 


本 章 主 要 介绍 小 程序 文件 API 的 用 法 ， 包 括 文件 的 保存 、 信 息 获 取 、: 
取 、 本 地 文件 信息 的 获取 、 删 除 本 地 文件 和 打开 指定 文档 。 
本 章 学 习 目标 
e 掌握 保存 临时 文件 的 方法 : 
。 掌握 获取 文件 信息 的 方法 ; 
。 掌握 获取 本 地 文件 列表 的 方法 ; 
。 掌握 获取 本 地 文件 信息 的 方法 ; 
e。 掌握 删除 本 地 文件 的 方法 ; 
。 掌握 打开 指定 文档 的 方法 。 


小 程 厅 使 用 wx.saveFile(OBJECT) 怀 存 文 件 到 本 地 。 注 题 ，saveFileO 会 
因此 调用 成 功 后 传 入 的 tempFilePath 将 不 可 用 。 其 OBJECT 参数 的 说 明 如 : 


表 7-1 wx.saveFile(OBJECT) 的 参数 
参数 说 明 
tempFilePath 南 要 保存 的 文件 的 临时 路 径 
success() 返回 文件 的 保存 路 径 ，res={fsavedFilePath: ' 文 伯 
fail() 接口 调用 失败 的 回调 函数 


completeO) 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执 4 


2 微 信 小 程序 开发 零 基础 入 门 


WXSS (pages/demo/saveFile/saveFile.wxss) 文件 代码 如 下 : 


1 Buttont 


margin: 1]orpx; 


JS (pages/demo/saveFile/saveFile.js) 文件 代码 如 下 : 


src: ，， // 图 片 的 临时 地 址 
/ /下载 文 件 


downloadFile: function () 1{ 
var that=this 


wiX.downloadFile l(t 


名 =] 人情 


084220422097499.jpg', 


Th Success: function(res) 1 

本 if (res.statusCode===200) 1{ 
2 that .setData (1{ 

于 SIC: res.tempFilePath 
14. }) 

有 } 

1 } 

11. }) 

49. Es 

19. // 保 存 文 件 

20 saveFile: function()} { 

2 var that=this 

22 let src=this.data.src 

3 i 性 二 二 = { 

4 wiX.ShowIoastl(t 

25 tities "请 先 下 载 文件 ! "， 

26 con: "none” 

2 }) 

28 } else I 

| wx.SaveFilelt 


时 


temopFi lepath*: crc, 


url: http://img06.tooopen.com/images/20180724/toooper 


:951 


全 本 DENIO 
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第 7 章 率 件 API 
1. 保存 文件 的 简单 应 用 


(1) 下 载 文件 
下 载 文 件 
(2 保存 文件 


已 微 信 小 程序 开发 零 基 础 入门 


(1 下 载 文件 


/ 站 
| 
NU 必 


(2) 保 存 文件 


二 微 售 小 


Ca) 页面 初始 效果 。 ”。。(b) 下 载 图 片 文件 (0) 3 


[RK 


QQ | top 本 | Filter Default levels ™ 


Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


| & 工具 未 校 验 合 法 域名 、web-view (业务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 。 


Cd) 文件 保存 成 功 时 Console 〈 控 制 台 ) 的 输出 内 容 
图 7-1 保存 文件 的 简单 应 用 


【 代 合 说 明 】 


Wed Aug 22 2618 16:53:26 GMT+8888 (中 国标 准时 间 》 配置 中 关 团 合法 域名 、web-view〔( 业 务 域名 ) 、TLS 厂 李 


净 忻 被 保存 到 :; http': /store/wx19979119a6fgle8a.067zA]s2XMBe1G6 U-POXMDuKv168c .hhAegsRmaoms195b36c 


本 示例 在 saveFile.wxml 中 人 设置 了 两 个 步 又 , 步 又 1 是 调用 wx.downloa 
件 , 步骤 2 是 调用 wx.saveFile0 保 存 该 文件 。 每 个 步骤 都 配 有 一 个 <button>: 


件 ，tap 事件 对 应 的 目 定 义 图 数 分 别 是 downloadFileO0 和 saveFile(。 


在 图 7-1 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 下 载 文 件 ， 图 (b) : 
功 后 的 效果 ， 此 时 所 下 载 的 图 片 将 显示 在 负面 的 <image> 组 件 中 ; 图 (c) ， 


消 明 提示 ; 图 (d) 是 文件 保存 成 功 时 Console〔( 控 制 台 〉 的 输出 内 容 。 


本 J 习 微 信 小 程序 开发 零 基础 入 门 


success0O 返 回 参 数 的 说 明 如 表 7-3 所 示 。 


表 7-3 success() 返 回 参 数 


参数 说 明 
S1Ze 文件 大 小 ， 单 位 为 B 


digest 按照 传 入 的 digestAlgorithm 计算 得 出 的 - 


erMsg 调用 结果 


【 例 7-2】 文件 API 获取 临时 文件 信息 的 简单 应 用 
WXMIL (pages/demo/getFileInfo/getFileImmfo.wxml) 文件 代码 如 下 : 


1. <view class='title>2 .获取 I 临 时 文件 信息 的 简单 应 用 </view> 

2. <Vliew Class='demo—box'> 

村 <View Class='title'>(1) 下 载 文 件 </view> 

4. <button tvpe="primary” bindtap="downloadFile"> 下 载 文 件 </bui 
<view Cclass='title'>{{tipl}}</view> 

6. </view> 

1. <view Class='demo—box'> 

8. <view class='title'>(2) 煞 取 I 临 时 文件 信息 </Vview> 

3 <button type=" primary™ bindtap="getEileInfo"> 斤 取 文 件 信息 </ 
10 <view Class='title'>{{tip2}}</view> 

11.</viewy> 


JS (pages/demoysgetFileInfo/getFileInfo.js) 文件 代码 如 下 : 


Page ({ 

data: I 
tempFilePath: "， // 临 时 文件 路 径 

}, 

/ /下 载 文件 

downloadFile: function() I 
var that=this 
wiX.downloadFilelt1 


下] 


9. url: 'http://localhost/miniDemo/demo.docx', // 用 户 可 以 归 
1 Success: function(res) 1 

1 4 // 只 要 服务 器 有 了 啊 应 数据 ， 殉 会 进入 success () 回调 

下 受过 if (res.statusCode===200) 1{ 

1 3 console.1og(' 文 件 被 下 载 到 : ' + res.tempFilePath) 

144. that.setDatal(t 

1 ET “ 近 不 7 廊 忻 已 下 载 。"， 

16. tempFilePath: res.temprilePath 

工 / - }) 


了 训 1 


了 9 - wx.getFileInfol(t! 

3 十。 filePath: temprilePath, 
3 Success: function(res) | 
38. that .setDatalt{(t 

二 全， | ' 交 忻 大 小 ; ' 上 res.size + "学 和 。" 
40. }) 

41. } 

42. }) 

43. } 

44.  } 

42 .1}) 


开发 者 工具 预 大 效 果 如 图 7-2 所 示 。 
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(1) 下 载 文件 


下 载 文件 


提示 


| 
祖先 下 载 记 件 ! 


(23) 获 取 临 时 文件 信息 


获取 文件 信息 


多 微 信 小 程序 开发 零 基础 入 门 


确定 


(a) 页 面 初始 效果 / Cb) 未 下 载 文件 的 错误 提 


第 7 章 文件 API 第 7 章 女 件 API 


2. 获取 临时 文件 信息 的 简单 应 用 2. 获取 临时 文件 信息 的 简单 应 用 
人) 下载 艾 件 (1 下 载 文 件 


提示 : 文件 已 下 载 。 


本 7 微 信 小 程序 开发 零 基础 入 门 志 y 


(K Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


© | top 可 | Filter Default levels ™ 
Wed Aug 22 2618 19:58:58 GMT+6866 〈 中 国标 准时 间 ) 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS ， 
|a > 工具 未 校 验 合法 域名 、web-view〔 业 务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 。 

灾 件 被 下 载 到 ; http: = 


» 


(e) 文 件 下 载 成 功 时 Console (控制 台 的 输出 内 容 
图 7-2( 续 ) 


【代码 膏 明 】 

本 示例 在 getFileInfo.wxml 中 设置 了 两 个 步骤 ,步骤 1 是 调用 wx.downl 
文件 demo.docx, 步 又 2 是 调用 wx.getFileInfo0 获 取 已 下 载 的 临时 文件 信息 
一 个 <button> 按 钮 触发 相应 的 事件 ， 用 户 必须 按 步 又 顺序 单 击 ， 否 则 会 触 ， 
按钮 的 tap 事件 对 应 的 目 定义 函数 分 别 是 downloadFileg0 和 getFileInfo(。 

在 图 7-2 中 ， (a) 为 页 面 和 初始 效果 ， 此 时 尚未 下 载 文件 ， 图 (b) : 
取 文 件 信息 的 铬 误 提 示 ; 图 (ec) 和 图 (d) 分 别 是 文件 下 载 和 信息 获取 成 功 
是 文件 下 载 成 功 后 Console 控制 台 的 输出 内 容 。 


OO7.3 获取 本 地 文件 列表 


小 程 订 使 用 wx.getSavedFileListtOBJECT) 获 取 本 地 已 你 和 存 的 文件 列表 。 
OBJECT 参数 的 说 明 如 表 7-4 所 示 。 


表 7-4 wx.getSavedFileList(OBJECT) 的 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 
fail() 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 


success0 〇 返回 参数 的 说 明 如 表 7-5 所 示 。 
表 7-5 success() 返 回 参 数 


Dj 


\ 
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> 记 
WW Ky 


卢 六 靖 
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5 
| 


> 记 
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ti 
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<view class='titler>3. 狄 取 本 地 文件 列表 的 简单 应 用 </vriew> 

<VlLeWwW Cass= aqemo 一 DoX > 
<View class='title'>(1) 人 保存 文 件 </vriew> 
<button type="primary™ bindtap"saveFile"3 保 存 文件 </button:; 
<view Class="'title'>{{tipl}}</view> 

</view> 

<Vliew Class='demo—box'> 
<View Class='title'»> (2) 获取 本 地 文件 列表 </Vview> 
<button type=" "primary™ bindtap="getSavedEileList"> 菊 取 文 件 ， 
<view class='title'>{ {tip2}}</view> 


.</view> 


JS (pages/demo/getSavedFileList/getSavedFileList.js〉 文件 代码 如 下 : 


Page (1 
data. 4 
savedFilePath: '， // 本 地 文件 路 径 
} ， 
// 下 载 和 保存 文件 


saveFile: function() 1 
var that=this 
wxXx.downloadFilell! 
url: 'http://localhost/miniDemo/demo.docx'"'，// 用 户 可 以 中 
Success: function(res) ({ 


/ /只 要 服务 器 有 响应 数据 ， 就 会 进入 success () 回调 
if (res.statusCode === 200) 1{ 
/ /保存 文件 到 本 地 


WX.SaveFlilel(t 
tempFilePath: res.tempF1ilePath, 
success: function (res) 1 
console .1og (' 交 件 保存 成 功 ! ') 
that.setDatal(t 
tipl: ' 提 示 : 文件 已 保存 。'， 
SavedFilePath: res.savedFilePath 


}) 


}) 


}) 


}, 
f AH 本 直人 人 性 如 | 专 


2 微 信 小 程序 开发 零 基 础 入 门 已 y 


hat 作 " 5 后 
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(了 保存 文件 人 1) 保 存 广 件 
2) 获取 本 地 文件 列表 (2) 蔬 取 本 地 艾 件 列表 


获取 文件 列表 
提示 : 文件 列表 已 获取 。 


获取 文件 列表 
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仙人 三 了 有 及 车 EMt 和 门人 


Ca) 页 面 初始 效果 (b) 未 保存 文件 前 蓝 
TT 20:58 
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(1) 保 存 文件 (1) 保 存 区 性 


保存 文件 


”提示 : 文件 已 保存 提示 : 文件 已 保存 . 


(2) 获 取 本 地 文件 列表 


获取 文件 列表 


(2) 获 取 本 地 文件 列表 


| 获取 文件 列表 


提示 : 文件 列表 已 获取 。 


右 微 信 小 程序 开发 零 基础 入 门 


(Cc) 你 和 存 文 件 右 干 次 (d) 保存 文件 后 重新 获取 文件 


Oi 


wx.saveFileO 下载 并 保存 Word 文件 demo.docx， 步 又 2 是 调用 wx.getSaved 
存 的 全 部 文件 列表 。 每 个 步骤 都 配 有 一 个 <button> 按 钮 触 肥 相应 的 事件 ， 且 
定义 图 数 分 别 是 saveFile0 和 getSavedFileListO。 

在 图 7-3 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 尚未 你 存 文件 ， 图 (b) : 
接 获 取 文 件 列表 的 效果 ， 此 时 文件 列表 为 宇 ， 对 应 图 (e) 的 第 1 行 输出 个 
功 保存 文件 的 效果 ， 共 单 击 两 次 ， 对 应 图 (e) 的 第 4 行 输 出 代码 ， 此 时 实 | 
保存 了 两 份 临 时 文件 ， 图 (d) 是 保存 文件 后 重新 获取 文件 列表 的 效果 ， 太 
以 下 的 全 部 代码 ， 由 该 图 可 见 此 时 输出 了 一 个 具有 两 个 元 系 的 数组 ， 每 个 
后 的 本 地 文件 。 

斋 要 注音 的 是 ,同一 个 小 程序 项 目 中 其 他 页 和 面 保存 过 的 文件 也 会 被 wx 
读 取 到 ， 因 此 初始 查询 列表 有 可 能 不 为 空 。 如 果 用 户 介 意 影 响 测 试 效 组 
wx.removeSavedFile0 先 批量 删除 本 地 文件 再 进行 测试 。 


Go 7.4 了 本 地 文人 人 和 


小 程序 使 用 wx.getSavedFileInfo(OBJECT) 获 取 本 地 文件 的 信息 。 此 接 | 
保存 到 本 地 的 文件 ， 知 需要 获取 临时 文件 信息 ， 请 使 用 wx.getFileInfo()。 
OBJECT 参数 的 说 明 如 表 7-7 所 示 。 


表 7-7 wx.getSavedFilelnfo(OBJECT) 的 参数 


参数 说 明 
Filepath 文件 路 径 


success() 接口 调用 成 功 的 回调 函数 ， 返 回 结果 见 success( 

failO 接口 调用 失败 的 回调 函数 

complete0 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执 和 
successQ 〇 返回 参数 的 说 明 如 表 7-8 所 示 。 


表 7-8 success() 返 回 参 数 
参数 说 明 
eIrMsg 接口 调用 结果 
size 文件 大 小 ， 单 位 为 B 


createTime 文件 保存 时 的 时 间 戳 ， 从 1970/01/01 08:00:00 


属 Fr ae il -和 和 vv 呈 部 E = = py Fi Fy EE A CE ph 
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Dj 


\D 


<view class='title'>(3) 获 取 本 地 文件 信息 </view> 
<button type=" "primary™ binadtap="getSavedEileInfon> 获 取 文 件 . 
<view Class='title'>{{tip3}}</view> 

</Vview> 


JS (pages/demoysgetSavedFileInfo/getSavedFileInfo.js) 文件 代码 如 下 : 


Page (1 
data: I 
temrilepaths /7/I 临 时 文件 路 径 
savedFilePath: '" /7/ 本 地 文件 路 径 
} ， 
/ /下 载 文 件 


downloadFile: function() 1 


var that=this 
WX.downloadFileli1 
url: http://localhost/miniDemo/demo.docx', /77 用 户 可 
success: function(res) 
// 只 要 服务 器 有 啊 应 数据 ， 就 会 进入 success () 回调 
i (‘res.statusCode === 200) I 
console.1log(' 文 件 被 下 载 到 : ”十 res.tempFilePath)} 
that.setDatal(t 
tipl: ' 提 示 : 文件 已 下 载 。 
tempFilePath: res.tempF1ilePath 
上 上) 


} 
}) 


}, 
/ /保存 文件 


saveFile: function() 1 


var that=this 
let tempFilePath=this.data.tempFilePath 
if (tempFilePath=="") (| 
/ /文件 尚未 下 载 
wiX.ShowModal (tl 
title: ' 提 示 '， 
content: "请 先 下 载 文 件 ! “'， 
showCancel: false 


}) 
} else 
// 保存 文件 到 本 地 
WX.SaveFilell 
tempFilePath: tempFilePpPath, 
Success: function(res) 1{ 
console.log(" 交 件 被 保存 到 : ”十 res.savedFilePpath) 


56. content: 请 先 保 存 文 件 ! '， 
< 各 showCancel: false 

28. }) 

} else | 

60 . / /获取 保存 的 文件 信息 

G1. wx.getSavedFilelInfoll! 

62. filePath: savedFilepath, 
63. Success: function(res) 1 
64. that.setDatal(l 

65 . CiB33 " 太 忻 大 小 寺 TRG S12Ze "了 字 人 和 " 
ce6. }) 

of. } 

68. }) 

69. } 

OD。 1} 

11.}) 


开发 者 工具 预览 效果 如 图 7-4 所 示 。 


有 ar i 
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4. 获取 本 地 文件 信息 的 简单 应 用 


(了 下 载 区 件 


心 微 信 小 程序 开发 委 基 础 入 门 


(a) 页 面 初始 效果 (b) 未 下 载 文件 错误 提示 (c) 未 保存 文 4 


第 7 章 立 件 API 第 7 章 文件 Apl 第 了 7 章 文 
4. 获取 本 地 文件 信息 的 简单 应 用 4. 获取 本 地 文件 信息 的 简单 应 用 4. 获取 本 地 文件 信 
(1 下 载 文件 (1) 下 载 文件 (1 下载: 


卫 外 | 微 信 小 程序 开发 零 基 础 入 门 车 ? 


[rk Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


© | top v | |Filter Default levels 了 


7 Wed Aug 22 2618 19:44:23 GMT+89868 (中 国标 准时 间 》 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS | 


> 


(g) 文件 下 载 和 保存 成 功 时 Console 〈 控 制 台 ) 的 输出 内 容 
7-4 〈 续 ) 


【代码 说 明 】 

本 示例 在 getSavedFileInfo wxml 中 设置 了 3 个 步 又， 步骤 1 是 调用 w 
载 Word 文件 demo.docx， 步 骤 2 是 调用 wx.saveFileO0 保存 该 文件 ， 
wx.getSavedFileInfoO) 获 取 本 地 文件 信息 。 每 个 步 又 都 配 有 一 个 <button> 按 入 
用 户 必 须 按 步 又 顺 订单 击 ， 人 耕 则 会 触发 错误 所 示 。 每 个 按钮 的 tap 事件 对 | 
别 是 downloadFile()、saveFileO 和 getSavedFileInfoO。 

在 图 7-4 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 下 载 文 件 ， 图 (b) 条 
件 未 下 载 和 未 保存 就 单 击 下 一 步骤 按钮 的 错误 提示 ; 图 (d) 和 图 (e) 分 
存 成 功 的 提示 效果 ; 图 (f) 是 获取 到 本 地 保存 文件 的 大 小 ; (ey 是 
successO 回 调 的 输出 内 容 。 


小 程序 使 用 wx.removeSavedFile(OBJECT) 删 除 本 地 已 保存 的 文件 。 
OBJECT 参数 的 说 明 如 表 7-9 所 示 。 


表 7-9 wx.removeSavedFile(OBJECT) 的 参数 


参数 说 明 
filePath 需要 删除 的 文件 路 径 

success() 接口 调用 成 功 的 回调 函数 

failO 接口 调用 失败 的 回调 函数 
complete() Function | 否 | 接口 调用 结束 的 回调 函数 (调用 成 I 


【 例 7-S】 文件 API 删除 已 保存 文件 的 简单 应 用 
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<view class='title'>{{tip3}}</view> 


16.</view> 


i 
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JS (pages/demo/removeSavedFile/removeSavedFile.js〉 文件 代码 如 下 : 


Page ({ 
data: { 
0 
}, 
/ /下 载 和 保存 文件 


saveFile: function() 1 
var that=this 
wix.downloadFilel(l 
url: http://localhost/miniDemo/demo.docx', // 用 户 可 以 委 
success: function(res) 1 
/ /只 要 服务 器 有 啊 应 数据 ， 束 会 进入 success () 回调 
ift (res.statusCode===200) 1{ 
CONnSOTle. Logdl 文件 被 下 载 到 : ' + res. temprFilePath) 
/ /保存 文件 到 本 地 
WX. SaveFEFilel(lt 
temprFilePath: res.tempFilePath, 
SUCCeSS: function(res) i 
console.1log(1! 文 件 锌 保存 到 : ' + res.savedFilePath) 
that.setDatal(t 
tipl: "提示 : 文件 已 保存 。"， 
savedFilePath: res.savedFilePath 


}) 


1) 
}, 
/ /删除 文件 


removeFile: function() { 
var that=this 
let savedFilePath=this.data.savedFilePath 
i (savedFilePath==""') I 
/7/ 文 件 疝 未 保存 
wiX.ShowModal ({ 
title: ' 提 示 "， 
content: ' 请 先 下 载 和 保存 文件 ! '， 
showCancel: false 
}) 


} else I 


全 -本 二 由 于 


了 [本 ” 微 信 小 程序 开发 零 基础 入 门 志 y 


和 地 filePath: savedFilePath, 
3 SUCCeSS: function(res) 1{ 
60. that.setDatall 

61. EE "站 件 大 小 :; : + res.size + ' 字 节 。" 
6z. }) 

63. 上 ， 

4. fail: function(res) 1 

9o. console.l1og (res) 

6e - that.setDatall 

6 了 . tip3: "提示 : 文件 不 存在 。" 
68. }) 

9. } 

0. 上 

A 

了 2 


开 肥 痢 工 具 预 损 效 来 如 图 7-3 所 示 。 
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5. 删除 已 保存 文件 的 简单 应 用 
全) 下 载 并 保存 文件 
下 载 并 保存 文件 


2) 删 除 文件 


删除 文件 


(3) 获 取 本 地 文件 信息 
获取 文件 信息 


局 微 信 小 程序 开发 零 基 础 六 | 门 


(a) 页 面 初始 效果 
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(1) 下 载 


(3) 著 取 


癌 微 信 小 程 F 


Cb) 未 保存 就 删除 文件 ee 


音 别 志 WE hat 二 20-24 
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5. 删除 已 保存 文件 的 简单 应 用 5. 删除 已 保 # 
(下 载 并 保存 文件 (1) 下 载 
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【代码 说 明 】 

本 示例 在 removeSavedFile.wxml 中 设置 了 3 个 步骤 ， 步 又 1 是 调用 w 
wxX.saveFileO 下 载 并 保存 Word 文件 demo.docx， 步 骤 2 是 调用 wx.removeSa 
件 ， 步 又 3 是 调用 wx.getSavedFilemfo0 获 取 本 地 文件 信息 。 每 个 步骤 都 配 
钮 触发 相应 的 事件 ，3 个 按钮 的 tap 事件 对 应 的 目 定义 函数 分 别 是 saveFile 
2etSavedFileInfo()。 

在 图 7-5 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 是 文件 尚未 下 载 和 保 ; 
的 铬 误 提 示 ; 图 (c) 和 图 (d) 分 别 是 文件 你 存 成 功 和 获取 本 地 文件 信息 
删除 文件 成 功 的 效果 ; 图 〈f 是 在 删除 文件 后 重新 委 试 获取 文件 信息 ， 由 
示 文 件 不 存在 ， 说 明文 件 已 被 删除 。 


小 程序 使 用 wx.openDocument(OBJECT) 新 开 页 面 打开 文档 ， 其 文 持 dc 
docx、xlsx、pptx 等 格式 。OBJECT 参数 的 说 明 如 表 7-10 所 示 。 


本 7-10 ”wx.openDocument(OBJECT) 的 参数 


人 六 襄 有 
filePath | 文件 路 径 ， 可 通过 downFile0 获 得 


file 1 SE 文件 类 型 ， 指 定 文 件 类 型 打开 文件 ， 有 效 值 为 
0 | docx、xlsx、pptx〔 最 低 版 本 为 1.4.0) 


success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执 


【 例 7-6】 文件 API 打开 文档 的 简单 应 用 
WXML (pages/demo/openDocument/openDocument.wxml) 文件 代码 如 下 


. <View Cass= 七 It e >o - 打开 文档 的 简单 应 用 </view> 

. <V1liew Class='demo—box'> 

<view class="'title'>(1) 下 载 净 件 </view> 

<button type="pIrimary™ binqtap="downloadEilLe"> 下 载 文 件 </bui 
<view class='title'>{{tip}}</view> 

. </vVview> 


i 


2 微 信 小 程序 开发 零 基础 入 门 


党 二 
过 
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url: http://localhost/miniDemo/demo.docx', 


success: function(res) I 
// 只 要 服务 器 有 啊 应 数据 ， 束 会 进入 success () 回调 
ift (res.statusCodeQ==—==—~200) 1{ 
onsoles log(lres) 
that .setDatal(l 
tip: ' 提 示 ; 文件 已 下 载 '， 
Path: res.temprilepPpath 
}) 


} 
1 


}， 
7 再 文 性 
openDocument: function(}) 1{ 
let path=this.data.path 
/ /文档 尚未 下 载 
if (path=="") 1 
WwWX -ShowMoaalL ({ 
iE 4 
ontent- "I i vi 


showCancel: false 


}) 
} 
/ /打开 文档 
else 1 


wx.openDocument ({ filePath: path |}) 


TTTT WE at -二 7: 了 3 重量 重 粳 量 WE 人 at 过 17:38 
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(1) 下 载 文 件 
下 载 文件 


i 4 TE ri 


/ /用户 可 以 下 
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[K Console Sources Network » 

I top 本 Filter Default levels ™ 

TY Wed Aug 22 26818 17:35:19 GMT+6888 (中 国标 准时 间 ) 配置 中 关闭 合法 域名 、web- VM2114 app 
view (业务 域名 )、TLS 版 本 以 及 HTTPS 证 书 检 查 

| 各 p 工 具 未 校 验 合法 域名 、web-view《 业 务 域 名 〉、TLS 版 本 以 及 HTTPS 证 刷 ， 

openDocument 


{TtempFiLePath: "http://tmp/wx19679110a008f61e8a.o6zAIs2XMBe1G U-P9XNM.. 
qr9w9psdExMb9e62ccaeracsgabcfea98fFf295ddb27bfF ,docx", statusCode: 288, errMsg: "dt 


(Cd) 文件 下 载 成 功 时 Console 控制 台 ) 的 输出 内 容 


中 .IJ "= = Wx19079]110a0f0le8a.o6zAJs2xXMBelG _u-PqXMDukvIl68c.gM9w93psdExMb9e62ccae7ac8at 
开始 揪 六 、 页 面市 局 引用 邮件 审阅 视图 加 戟 项 


而 | 下 | i = eit en 区 人 二 全 区 in 
国 ”宋体 (中 文 下 -小 初 -AAA Aa” 各 入 I 三 "三 "和 琴 琴 | 全" 站 | JIAaBbccpdlAagbccodl AaBhb- / 


4 贴 国 1 U0- x x | 从- 忆 - 和 -加 全 云云 去 国 贿 | 醛 -| 雏 - 玫 ” | “区 | “i 。 标 看 1 | 要 
i 字体 a 自演 F 伴 坟 
图 mr N11 [本 1 


页 面 : 1/1 | 字数 : 9 | 中 文 (中 国 ) | 国明 她 等 等 100%( 


(e) 被 打开 的 文档 效果 
图 7-6 ( 续 ) 


【 代码 说 明 】 
本 示例 在 openDocument.wxml 中 设置 了 两 个 步骤 ， 步 又 1 是 调用 wx.d 


Word 文件 demo.docx， 步 骤 2 是 调用 wx.openDocumentO 打 开 访 文件。 每 : 
<button> 按 钮 触 友 相应 的 事件 ， 且 必须 控 照 步 又 顺 厅 依 侈 完成 。 这 两 个 按钮 
目 定 义 图 数 分 别 是 downloadFile() 和 openDocument()。 


在 图 7-6 中 ， 图 (a) 为 页 面 初 始 效 未 ; 图 (b) 有 坪 尚 未 下 载 文 件 束 早 1 


钮 的 效果 ， 会 得 到 一 个 错误 提示 ; 图 (c〉 是 文件 下 载 成 功 的 效果 ; 图 (d 
时 [17 辕 BRE 当 村 Conaole ( 控 咎 | 全) 丰 TED 输 中 内 2 由 1 世 图 9 只 租 广 w 


数据 缓存 API 


本 章 主 要 介绍 小 程序 数据 缓存 API 的 应 用 ， 包 括 数据 的 存储 、 获 取 、| 
I 


。 了 解 小 程序 本 地 缓存 的 概念 ; 

。 掌握 数据 存储 相关 接口 的 用 法 ; 

e 掌握 数据 获取 相关 接口 的 用 法 ; 

e。 掌握 存储 信息 获取 相关 接口 的 用 法 ; 
。 掌握 数据 删除 相关 接口 的 用 法 ; 

。 等 握 数据 清空 相关 接口 的 用 法 。 


SR 


为 了 提高 使 用 的 便捷 性 ， 同 一 个 小 程序 允许 每 个 用 户 单独 存储 10MB | 
设备 中 ， 这 些 数 据 称 为 小 程序 的 本 地 缓存 。 开 有 友 者 可 以 通过 数据 缓存 API : 
置 、 获 取 和 清空 工作 。 小 程序 的 本 地 缓存 以 用 户 维度 来 进行 隔离 ， 假 设 有 
用 同一 台 设 备 ，A 用 户 是 无 法 读 取 到 B 用 户 相 关 数 据 的 ， 反 之 亦 然 。 

需要 注意 的 是 ， 小 程序 的 本 地 缓存 仅 用 于 方便 用 户 ， 如 果 用 户 设备 的 : 
信 会 清空 最 近 较 人 未 使 用 的 本 地 缓存 。 因 此 不 建议 用 户 将 关键 信息 全 部 存 ; 
空间 不 足 或 设备 更 换 。 

数据 缓存 API 目前 共有 5 类 ， 包 括 数据 的 存储 、 获 取 、 删 除 、 清 空 ， 
取 。 每 一 类 均 分 为 异步 和 同步 两 种 函数 写法 ， 有 具体 内 容 如 表 8-1 所 示 。 


{HY 第 8 


该 表 中 的 Sync 来 源 于 类 文 单 词 synchronization 的 前 4 个 字母 , 表示 辣 
据 缓存 API 中 璐 有 Sync 字样 的 函数 均 为 同步 函数 ， 否 则 就 是 异步 函数 。 


Oo 82 丽人 
8.2.1 异步 存储 数据 


小 程序 使 用 异步 接口 wx.setStorage(OBJECT) 将 数据 存储 在 本 地 缓存 十 
OBJECT 参数 的 说 明 如 表 8-2 所 示 。 


表 8-2 wx.setStorage(OBJECT) 的 参数 


参数 说 明 

key 本 地 缓存 中 指定 的 key 

data ”Objectsting | 是 | 需要 存储 的 内 容 

success() 3 接口 调用 成 功 的 回调 函数 

fail() 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 〈 调 用 所 


注意 : 如 果 指 定 的 key 原先 已 存在 ， 则 新 数据 会 覆盖 掉 原 来 该 key 对 


Dl| 苔 | | 并 


ID 


wx.setStorage(OBJECT) 示 例 代 码 格 式 如 下 : 


. WX.Setstorage (tl 

ew 

data: ‘value', 
SUucCccCcess:function()l! 


名 = 上 捕 


/ /存储 成 功 
上 
鞋 旺 LI :unctIont) [| 
// 和 存储 失败 
3. 上 
10. complete:function'()t 
1 / /存储 完 成 
l } 


其 中 ，5 引 号 中 的 kev 和 value 可 以 替换 汶 开 发 者 雪 要 的 其 作 廊 本 内 容 


区 中 微 信 小 程序 开发 零 基础 入 门 


1. Page l(t 

2 data: I 

| FRewe Tg 

人 data: “ 

2 }, 

c keyInput: functionte} 1 

这 this.setDatal({ key: e.detail.value }); 
}, 

= datalInput: function(e) 1{ 

LA this.setDatal({ data: e.detail .value 上 上 上) 7; 
4 


lz2. setotorage: functiontey 1 
有 let key=this.data.keys 
14. if (key.length==0) { 


] 3 wiX.ShowIoastl(t 

16. title: 'KEY 不 能 为 空 ! '， 
1 天。 1ICon: mone 

18. }) 

3 } else I 

20 - WwWX -SetStorage (tl 

2 key: key, 

2 data: this.data.data 
i }) 

4. } 

pn 

-6.1}) 


第 8 章 数据 缓存 API 第 8 章 数据 缓存 API 
1. 数据 存 依 setStorage 的 简单 频 用 1. 数据 存储 setstorage 的 简单 应 用 
WwWx.setstoragelfOBJECT) 异 步 存 情 wx.setstoragelOQBJECT) 异 步 存储 
请 输入 KEY 名 称 请 输入 KKEY 和 名 称 
请 输入 DATA 值 请 输入 DATA 值 


a 
KEY 涉 前 为 里 ! 


已 微 信 小 程序 开发 要 基 而 入门 


第 8 章 
1. 数据 存 情 se 


Wx.setStorag 


] 


心 微 信 小 程 
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【代码 说 明 】 

本 示例 在 setStorage.wxml 中 设置 了 两 个 <input> 组 件 分 别 用 于 输入 KEY 
并 使 用 <button> 组 件 进 行 数 据 的 提交 。 在 setStorage.js 的 data 属性 中 预 设 1 
日 内 容 ， 和 等 生 更 新 ;然后 使 用 目 定 义 函 数 keyInputO 〇 和 dataInputO 来 著 取 这 | 
窑 ， 并 更 新 a 到 data 属性 中 ; 使 用 目 定 义 冰 数 setStorage() 獒 取 更 新 后 的 key 
果 为 空 则 提示 用 户 输入 ， 如 果 不 为 空 则 调用 wx.setStorage0O 函 数 进行 异步 三 

在 图 8-1 中 ,图 (a) 为 页 面 初 始 效果 ; 图 (b) 为 未 输入 KEY 名 称 时 的 
为 数据 存储 完成 后 的 状态 ; (d) 是 存储 数据 后 调试 器 中 Storage 面板 的 ; 
数据 已 经 成 功 存 储 。 


8.2.2 ”同步 存储 数据 
小 程序 使 用 同步 接口 wx.setStorageSync(KEY,DATA) 将 DATA 但 存 储 : 
的 KEY 中 ， 参 数 说 明 如 表 8-3 所 示 。 


表 8-3 Wx. Te DATA) 的 参数 
参 。 殊 
key 本 地 缓存 中 指定 


注意 : 如 果 指 定 的 key 原先 已 存在 ， 则 新 数据 会 履 盖 掉 原 米 该 key 对 


wx.setStorageSync(KEY.DATA) 示 例 代 码 格 式 如 下 : 


“Cry | 
wx.SetSstorageSync("key', value') 
. } catch{(e) { 


/ /发生 寞 弟 


i 


} 


其 中 ， 引 号 中 的 key 和 value 可 以 蔡 换 为 开发 者 需要 的 其 他 文本 内 容 
try-catch 结构 也 可 以 省 略 不 与 

【 例 8-2】 数据 缓存 API 之 setStorageSync 的 人 简 蛙 应 用 

WXML (pages/demo01/setStorageSync/setStorageSync.wWwxml) 的 代码 片 


1. <view class='title'>1 .数据 存 情 setSstorageSync 的 简单 应 用 </view> 


i 


57 有 微 信 小 程序 开发 零 基础 入 门 


1. 数据 存储 setStorageSync 的 简单 应 用 


this.setDatal({ key: e.detail.value }); 
上 ， 
datalInput: function(e) | 
this.setDatal({ data: e.detail .value })); 
上 
SetstorageSsSync: functionl(le) 1 
let key=this.data.key; 
if (key.length==0) { 
wX.ShowIoast(t 
title: 'KEY 不 能 为 空 ! '， 
lcon: ‘none'" 
}) 
} else I 
wx.SetSstorageSync (keyr, this.data.data) 


第 8 草 数据 缓存 API 第 8 章 数据 缓存 API 
1. 数据 存储 setStoragesync 的 简单 应 用 


WXx.setStorageSsync(KEY,DATAI) 同 步 存储 Wx.setstorageSsymctKEY,DATA) 同 步 存 情 


请 输入 KEY 名 称 


请 疆 六 DATA 伸 


KEY 直角 为 室 ! 
加 微 信 小 程序 开发 零 基础 入 门 ia 


(a) 负面 初始 效果 Cb) 提交 时 未 输入 KEY 和 名称 


击 午 二 别 Eat 二 


第 81 


1. 数据 存储 sei 


Wx.setStorage 


导向 谷村 


a 


rr 


Console Sources Network Security Audits Storage 


AppData 


Wxn 
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中 的 内 容 ， 并 更 新 到 data 属性 中 ; 使 用 自 定 义 函 数 setStorageSync0 获 取 更 ; 
行 判 断 ， 如 果 为 空 则 提示 用 户 输入 ， 如 果 不 为 空 则 调用 wx.setStorageSyncO 妊 

在 图 8-2 中 ,图 (a) 为 页 面 初始 效果 ; 图 (b) 为 未 输入 KEY 名 称 时 的 
为 数据 存储 完成 后 的 状态 ; 图 (d) 是 存储 数据 后 调试 右 中 Storage 面板 的 ; 
数据 已 经 成 功 存储 。 


8.3.1 卉 步 钛 取 数 据 


小 程 订 使 用 异步 接口 wx.getStorage(OBJECT) 从 本 地 缓存 中 措 步 获取 提 
容 ，OBJECT 参数 的 说 明 如 表 8-4 所 示 。 


表 8-4 wx.getStorage(OBJECT) 的 参数 


参数 说 明 

key 一 本 地 缓存 中 指定 的 key 

success() Es 接口 调用 成 功 的 回调 函数 ，res={fdata: 
BilO | Function | 否 | 接口 调用 失败 的 回调 函数 

completeO 接口 调用 结束 的 回调 函数 (调用 成 功 、 


其 中 ，successO 返 回 参数 data 表示 key 对 应 的 内 容 ， 该 值 为 String 类 六 
wxX.setStorage(OBJECT) 示 例 代 码 格式 如 下 : 


- 人 和 -GetStoOradgGe ({ 

IE 

success: function(res) 1 
console.log(res.data) 


} 


I 


- }) 


其 中 ，5 引 写 中 的 key 可 以 丛 换 为 实际 用 到 的 KEY 名 称 ， 且 success(O) 国 : 
中 的 res.data 了 吏 是 需要 获取 的 绥 存 数据 但 。 

【 例 8-3】 数据 缓存 API 之 getStorage 的 简单 应 用 

WXML (pages/demo02/getStorage/getStorage.wxml) 的 代码 片段 如 下 : 


2 微 信 小 程序 开发 零 基础 入 门 


本 }, 

6. keyInput: functionte}) { 

> thijs.setDatal({ key: e.detail.value }); 
到 }, 

> 甩 getsSstorage: function() 1 

10. var that=this; 


let key=this.data.key; 
有 if (key.length==0) 1{ 


于 二 WwWX .ShowTIToast ({ 

14. title: "KEY 不 能 为 空 ! '， 
1 1Con: “mone 

16. }) 

I } else I 

18. WwWX -GetStoragde (tl 

1 key: key, 

二 内 。 Success:function(res})i 
人 that.setData({data:res.datal}) 
i } 

23. }) 

24. } 

Ze 

6.1}) 


运行 效果 如 图 8-3 所 示 。 


[K Console Sources Network Security Audits Storage AppData Wxml 


I 
Key Value 
admin "654321" 


(a) 读 取 数据 前 Storage 面板 的 效果 


而 而 而 而 NeChat < 二 17:35 L100% [mk 了 17:35 


例题 DEMO bay 例题 DEMO 


第 8 章 数据 缓存 API 第 8 章 数据 缓存 API 第 8 章 
2. 数据 获取 getStorage 的 简单 应 用 2. 数据 获取 getStorage 的 简单 应 用 2. 数据 获取 gs 


wx.getStorage(OBJECT) 异 步 获 取 wx.getstorage(OBJECT) 异 步 获 取 wx.getStorar 


请 输入 KEY 名 称 清 输入 KEY 名 称 


第 8 


【代码 说 明 】 

本 示例 在 getStorage.wxml 中 设置 了 <input> 组 件 用 于 输入 KEY 名 称 ， 
件 进 行 数据 的 获取 ， 在 按钮 下 方 使 用 了 <view> 组 件 显 示 获 取 到 的 DATA 伪 
的 data 属性 中 预 设 key 为 空白 内 容 、data 值 为 “尚未 获取 ”然后 使 用 自 完 
来 获取 输入 框 内 容 并 更 新 data 值 ; 使 用 目 定义 函数 getStorageO 〇 获取 更 新 后 | 
所， 如 果 为 空 则 提示 用 户 输入 ， 如 果 不 为 空 则 调用 wx.getStorageO 函 数 进 行 

在 图 8-3 中 ,图 (a) 是 读 取 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 三 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 
始 效 果 ; 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 获取 完 


8.3.2 ”同步 狼 取 数据 
小 程序 使 用 同步 接口 wx.getStorageSync(KEY) 从 本 地 缓存 中 同步 获取 
参数 说 明 如 表 8-5 所 示 。 


表 8-5 wx.getStorageSync(KEY) 的 参数 


参数 说 
key 本 地 缓存 中 拓 


wxX.getStorageSync(KEY) 示 例 代 码 格 式 如 下 : 


| 
Var Value=wXx .detStoragdeSyncCc (" Key" ) 
if (value) 1{ 


// 处 理 获 取 到 的 value 值 


和 | 
EE 
i 


} 
。 } catchl(e) { 


/ /发生 异 弟 


下 


} 
注意 : 引号 中 的 key 可 以 替换 为 实际 用 到 的 KEY 名 称 , try-catch 结构 - 


【 例 8-4】 数据 缓存 API 之 getStorageSync 的 简单 应 用 
WXML (pages/demo02/getStorageSync/getStorageSync.wxml) 的 代码， 
段 如 下 : 
1. <view class='title'>2 .数据 获取 getstoragesync 的 简单 应 用 </view> 


2,. <View Class="'demo—box'> 


“二 TTT EY [iTE dE Hg .- "de 


2 微 信 小 程序 开发 零 基础 入 门 


9. getstoragesync: functiont() I 


10. var that=this; 


下 let key=this.data.key; 


下 if (key.length==0) 1{ 

二 二。 WwWX -ShowTIToast ({ 

T title: 'KEY 不 能 为 空 ! '， 

有 1cCon: "none" 

LT 1 

| } else I 

18. Var value=wx .getStorageSync (key):; 
19. if (value)I 

20. that.setData({data:valuel}):; 
人 和。 } 

> } 

和 

4.}) 


Console SOUrces 


重重 重生 各 EEC 上 at 全 17:56 


倒是 DEMOD 


第 8 章 数据 缓存 API 
2. 数据 获取 getStorageSync 的 简单 应 用 


wx.getSstorageSynclKEY) 同 步 获取 


1 下 转 A KEY Es oh 


DATA 值 : 尚未 获取 


总 微 信 小 程序 开发 要 基础 入 门 


Network Security Audits Storagqe AppData Wxml 


Value 


“654321" 


(a) 读 取 数据 机 Storage 面板 的 效 采 


生硬 要 重要 WNChat 过 17:56 


倒 苔 DEMGO 


第 8 章 数据 缓存 API 第 8 痢 
2. 数据 获取 getstoragesync 的 简单 应 用 2. 数据 获取 get 
wx.getStorageSync(KEY) 同 步 著 取 Wx.getStorar 


请 输入 KEY 名 称 


DAT, 


名 微 信人 小 
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义 函 数 keyInput0 〇 来 获取 输入 框 内 容 并 更 新 data 值 ;使 用 目 定 义 函 数 getSt 
新 后 的 key 值 并 进行 判断 , 如 果 为 空 则 提示 用 户 输入 ,如果 不 为 空 则 调用 Ww 
水 数 进行 数据 的 同步 获取 。 

在 图 8-4 中 ,图 (a) 是 读 取 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 广 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 
始 效 果 ; 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 获取 完 


吕 O 8.4 存储 信息 的 获取 
8.4.1 异步 犹 取 存 储 信息 

小 程序 使 用 wx.getSstorageInfo(OBJECT) 异 步 获取 当前 本 地 缓存 数 
OBJECT 参数 的 说 明 如 表 8-6 所 示 。 


表 8-6 wx.getStoragelnfo(OBJECT) 的 参数 


参数 说 明 
success0 | Funciion | 是 | 接口 调用 成 功 的 回调 函数 


并 


fail() 否 接口 调用 失败 的 回调 函数 
completeO) 盏 接口 调用 结束 的 回调 函数 (调用 | 


其 中 ，success0 返 回 的 主要 参数 如 下 。 

e keys: String Array 类 型 ， 表 示 当 前 storage 中 所 有 的 key。 

e currentSize: Number 类 型 ， 表 示 当 前 占用 的 空间 大 小 《单位 为 KB ) 
。 limitSize: Number 类 型 ， 表 示 限 制 的 空间 大 小 (单位 为 KB) 。 


wxX.getStorageInfo(OBJ 正 CT) 示例 代码 格式 如 下 : 


. WX.getstoragelnfolt 

Success: function(res) I 
console.l1og (res.keys) 
console.l1og (res.currentSsS1ize) 
Sonsole. Log(res. lmitSize) 


} 


下] 


-上 


2&10 ” 微 信 小 程序 开发 零 基 础 入 门 
8. </View> 


JS (pages/demo03/getStorageInfo/getStorageInfo.js) 的 代码 上 请 段 如 下 : 


1. Page (tl 

Sn getsSstoragelInfo: function() 1 

六 var that=this; 

4. wx.gqetstoragelInfol(l 

了 SuccCcess: function(res) I 

0. CoOnNnsole. Logtltresys 

这 元 that.setDatal(l 

8. CUurrentSize: res.currentSsize, 
2 ]imitSize: res.1imitSize, 
10. kevs: res.keys 

11. } ) 7 

1 } 

1 上 

14. |} 

15-4) 


年 二 = 


一 和 
运行 效果 如 图 8-5 所 示 。 
Console Sources Network Security Audits Storage AppData Wxml Sen: 


Value 
Nn 12 3" 
"A5 G6" 


TO" 


(a) 读 取 数据 前 Storage 面板 的 效果 


重重 重要 本 NE 人 用 直上 过 29 


重重 本 重症 全 上 at 全 相 


倒是 DEMO 


例题 DEM 
第 8 章 数据 缓存 API 第 8 章 数据 缓存 API 
3. 存 情 信 息 获取 getStorageInfo 的 简单 应 用 3. 存储 信息 获取 getStorageInfo 的 简 
wx.getstorageInfofOBJECT) 异 步 获取 wx.getStorageInfo(OBJECT) 异 步 持 
已 使 用 空间 : KB 已 使 用 空间 : 1KB 
最 大 空间 : KB 最 大 空间 : 10240KB 


i ML Rl OT ds I | 


8.4.2 


1 
EE 
4. 
3 
6 
J 


下 
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【代码 说 明 】 

本 示例 在 getStorageInfo.wxml 中 疏 兽 了 <button> 组 件 进行 数据 的 获取 ， 
了 <view> 组 件 显示 获取 到 的 存储 信息 。 考 虑 到 key 值 可 能 不 止 一 个 ， 因 此 人 
示 对 应 的 <view>=> 。 在 getStorageInfo.js 中 使 用 目 定 义 图 数 getStorageInfo() 获 ] 
衬 | 导 (CcurrentSize)、 最 大 衬 间 限制 (limitSize) 和 当前 存在 的 键 名 称 (keys),，: 
方法 将 这 些 参数 信 渔 染 到 getStorageInfo.wxml 页 徊 上 。 

在 图 8-5 中 ， 图 (a) 是 获取 存储 信息 前 调试 器 中 Storage 面板 的 效果 ，， 
8.2 市 的 任意 例题 事先 存储 数据 ， 也 可 以 且 接 在 Storage 面板 中 手动 输入 数 ] 
始 效 采 ; 图 (c) 为 存储 信息 获取 完成 后 的 效果 。 


同步 获取 存储 信息 


小 程序 使 用 wx.getStorageInfoSyncO 辣 步 获 取 当 前 本 地 绥 存 数据 的 相关 
wx.getStorageInfoSyncO 示 例 代 人 码 格 式 如 下 : 


二 

VAaAr IrLes~wx.getSstoragelnfoSsyncl() 
console.1og (res.keys) /1/ 刍 名 称 
console.log (res.currentSsize)  // 己 使 用 空间 
console.logl(res.l1limitSize) /7 最 大 宪 国 限制 

} catch(e) 1 
/ /发 生 弄 冲 

} 


在 上 述 代 码 中 try-catch 结构 也 可 以 省 略 不 写 。 

【 例 8-6】 数据 缓存 API 之 getStoragelInfoSync 的 简单 应 用 

WXML 《pages/demo03/getStorageInfoSync/getStorageInfoSync.wWxml) | 
代码 卢 段 如 下 : 


.<Viewclass='title'>3. 存 储 信 息 获 取 了 etStorageInftoSyYync 的 简单 应 用 < /vie 
. <View Cass= aqemo 一 boOX > 


<V1IeW class='title'>wx.getstorageInfoSync () 同步 获取 </view> 
<button type=" primary™ bindtap="getSstorageInfosync"> 和 存储 信 
<View class='title'> 已 使 用 空间 : {{currentsize} }KB</view> 
<view class='title'> 慑 大 守 间 : {{limitSsize} }KB</view> 

<View Class="'title" wx:for="{{keys}}' wx:kevy=" keyl{index}}'" 
{{item} }</view> 


号 微 信 小 程序 开发 零 基础 入 门人 


Conscle Sources Network Security Audits Storage AppData Wxml Sens 


Value 
LI 123" 
"TAS6" 


Wa 17899" 


(a) 读 取 数据 前 Storage 面板 的 效果 


G45 


100% nih 重要 要旨 要 WChat 学 GA5 
例题 DEMO | 例题 DEMO “me 
第 8 章 数据 缓存 API 第 8 章 数据 组 存 API 
3. 存储 信息 获取 getStoragelInfoSync 的 简单 3 Sg 
应 用 WW 用 


wx.getstorageInfosyncl) 同 步 获取 
已 使 用 空间 : KB 
最 大 空间 : KB 


wx.getSstoragelnfoSync() 同 步 获 有 


| 存储 信息 获取 
已 使 用 空间 : 1KB 


最 大 空间 : 10240KB 
局 微 信 小 程序 开发 堆 基 础 入 | 


KEYO : test0 
KEY1 : testl1 
KEY2 : test2 


已 微 信 小 程序 开发 零 基 础 入 | 
(b) 页 面 初始 效果 (c) 数据 获取 完成 


图 8-6 存储 信息 获取 getStoragelnfoSync 的 简单 应 用 

【代码 说 明 】 

本 示例 在 getStorageInfoSync.wxml 中 设置 了 <button> 组 件 进行 数据 的 |: 
使 用 了 <view> 组 件 显 示 获 取 a 到 的 存储 信息 。 考 上 处 a 到 key 值 可 能 个 止 一 个 , 上 
环 旺 示 对 应 的 <view> 。 在 getStorageInfoSync.js 中 使 用 目 定 义 图 数 getStorag 
表 已 经 使 用 的 空间 〈currentSize)、 节 大 空间 限制 〈limitSize) 和 当前 存在 日 
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但，OBJECT 参数 的 说 明 如 表 8-7 所 示 。 


参 
key 


success0 接口 调用 的 回调 函数 


fail() 


dd 8-7 WX. > ECT) 的 参数 


数 | 类 型 | 必 说 明 
一 


String 本 地 绥 存 中 指定 的 key 


接口 调用 失败 的 回调 函数 


completeO 本 -一 接口 调用 结束 的 回调 函数 〈 调 用 成 : 


wxXx.removeStorage(OBJECT) 示 例 代 码 格 式 如 下 : 


I 


}) 


. WX.IemoveStorage ( { 


ke 
success: function(res) I 
Console.1og (res) 


} 


上 述 代码 中 引号 内 的 key 可 以 斩 换 为 实际 用 到 的 KEY 名 称 ， 且 succes 
的 内 容 为 {ferrMsg:"removeStorage:ok"}。 

【 例 8-7】 数据 缓存 API 之 removeStorage 的 简单 应 用 

WXML (pages/demo04/removeStorage/removeStorage.wxml) 的 代码 片段 如 1 


DY 


. <view class='title'>4 .数据 删除 removeStorage 的 简单 应 用 </view> 
-<VlLeW Cass= aqQemo 一 boX > 


V1iEeEW class='title'>wx.removeSstorage (OBJECT) 异步 删除 </view: 
<1nput name=" key'" placeholder=' 请 输入 KEY 名 称 ， bindinput="k 
<button type=" "PIrimary” binadtap="removeStoraden> 数 据 删 除 < /bi 


。 </view> 


JS (pages/demo04/removeStorage/removeStorage.js) 的 代码 请 段 如 下 : 


keyInput: functionte}) I 

Ehniss Selatall Fevw: edetaltl .valne Ts 
}, 
removeStorage: function() I 

let key=this.data. key;? 


于 微 信 小 程序 开发 零 基础 入 门 忆 X 


之 三 |} 
2 1) 


和 | i 
运行 效果 如 图 8-7 所 示 。 
Console Sources Network Security Audits Storage AppData Wxml Ser 


Value 


“1 
"456" 


"8 由 | i 


(a) 数据 删 


疹 前 Storage 面板 的 效果 


[TTT Wi 已 人 用 at “二 重要 重生 本 WTEChiat 二 10-22 


mIDENIO 


第 8 草 数据 缓存 API 第 8 草 数据 缓存 API 第 8 章 
4. 数据 删除 removestorage 的 简单 应 用 4. 数据 删除 removestoradgde 的 简单 应 用 4. 数据 删除 rem 


wx.removestorage(OBJECT) 异 步 删 除 wx.removestoragelOBJECT) 异 步 删 除 Wx.removestol 


rE 
2 


请 输 六 民 EY 名 称 请 输 六 KEY 名 称 


局 微 信 小 程序 开发 地 基础 入 门 EA “人 


(b) 页 面 急 始 效 未 (c) 所 区 时 未 输入 KEY 名 称 (d) 3 


[KR Console Sources Network Security Audits Storage AppData Wxml si 


过 渡 .… 


Key ] Value 
test0 sg 
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痕 数 进行 数据 的 卉 步 删 除 。 


在 图 8-7 中 ， (a) 是 删除 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 矿 


下 的 任意 例题 事先 人 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 
初始 效果 ; 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 删除 
为 数据 删除 后 Storage 面板 的 效 采 ， 由 设 图 可 见 指定 的 key 已 经 彼 删 际 。 


8.5.2 ”同步 删除 数据 


值 ， 


i 


小 程 厅 使 用 Wx.removeStorageSync(KEY) 从 本 地 绕 存 中 同步 删除 指定 
参数 说 明 如 表 8-8 所 示 。 


表 8-8 wx.removeStorageSync(KEY) 的 参数 


SS 数 说 
key 本 地 缓存 中 


WX.IemovesStorageSync(KEY) 示 例 代 人 码 格 式 如 下 : 


| 


WwWX .TemovesStoradeSync ("key'") 
} catch(e) I 


/ /发 生 弄 明 
} 


注意 : 引号 中 的 key 可 以 替换 为 实际 用 到 的 玫 EY 名 称 , try-catch 结构 : 


【 例 8-8】 数据 缓存 API 之 removeStorageSynec 的 向 单 应 用 
WXML (pages/demo04/removeStorageSync/removeStorageSync.wxml) | 


代码 厂 段 如 下 : 
1. <view class='title'>4 .数据 删除 removeStorageSync 的 简单 应 用 < /view> 
2. <View Class="'demo—box'> 
二 <V1Iew class='title'>wx.removeStorageSync (KEY) 同步 删除 </viei 
4. <input name=" key'" placeholder=' 请 输入 KEY 名 称 ， bindinput="k 
Ee <button type="pIrimary™ bindtap="removeStorageSvync"> 数 据 删 医 
6. </view> 


JS (pages/demo04/removeStorageSync/removeStorageSync.js) 的 代 但 所 
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16. wiX. removeStorageSync (kev):; 
下 WwWX -ShowTIOasSt ({ 
18 . title: "删除 完毕 ! '， 
区 lcon: “mone ， 
2 }) 
a } 
i 
So 
和 yy” - 一 一 
运行 效果 如 图 8-8 所 示 。 
Console Sources Network security Audits Storage AppData Wxml Se 
Value 
而 下 123 LI 
"456" 
i 189" 
Ca) 数据 删除 前 Storage 面板 的 效果 
重重 量 本 是 WChat 到 生硬 画面 三 WAChat 二 1045 
倒是 DEMO 
第 8 章 数据 缓存 API 第 8 章 数据 缓存 API 第 8 章 
4. 数据 删除 removestoragesync 的 简单 应 用 4. 数据 删除 removestorageSsync 的 简单 应 用 4. 数据 删除 remow 
Wx.removestor 


Wx.removestoragesSynclKEWn 同 步 删 队 


请 输入 KEY 名 称 


己 微 信 小 程序 开发 零 基础 入 门 


(b)》 页 面 初始 效果 


Wx.rermovestoragesync(KEY) 同 步 删除 


请 输入 KEY 名 称 


Se. 
hb 


KEY 二 能 为 室 ! 


Cc) 提交 时 未 输入 KEY 名称 Cd) 数 


| | 


” PA MS dl 
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<button> 组 件 进行 数据 的 删除 。 在 removeStorageSync.js 的 data 属性 中 预 设 
然后 使 用 目 定 义 函 数 keyImput0 来 获取 输入 框 内 容 并 更 新 data 值 ; 
removeStorageSync(O 获 取 更 新 后 的 key 值 并 进行 判断 ， 如 采 为 空 则 提示 用 ， 
空 则 调用 wx.removeStorageSyncO 国 数 进 行 数据 的 同步 删除 。 

在 图 8-8 中 ， 图 (a) 是 删除 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 广 
节 的 任意 例题 事先 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 
初始 效果 ; 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; (d) 为 数据 删除 
为 数据 删除 后 Storage 面板 的 效果 ， 由 该 图 可 见 指定 的 key 已 经 被 删除 。 


8.6.1 元 步 清空 数据 


小 程序 使 用 wx.clearStorage0 异 步 清空 全 部 本 地 数据 缓存 ， 示 例 代码 格 


WX.ClearSstorage () 


【 例 8-9】 数据 缓存 API 之 clearStorage 的 简单 应 用 
WXML (pages/demo05$/clearStorage/clearStorage.wxml) 的 代 但 片段 如 下 


. <view class='title'>5 .数据 清 宇 clearsSstorage 的 简单 应 用 </view> 

. <View Class='demo—box'> 

<V1iEewW class='title'>wx.clearSstorage (KEY) 同步 清空 </view> 
<input name="key" placeholder=" 请 输入 KEY 名 称 ' bindinput="k 
<button type=" primary™ bindtap="clearSstorage"> 数 据 清 空 </bui 
. </vVview> 


TY 


JS (pages/demo0S/clearStorage/clearStorage.js) 的 代码 上 请 段 如 下 : 


- Pagel(t{ 
clearSstorage: function(}) 1 
wx.clearsSstorage () : 
WwWX .ShowTIoast ({ 
title: 数据 已 清空 ! '， 
1cCon: “mone- 
上 ) 
} 


Oj 
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8-9 数据 清空 clearStorage 的 简单 应 用 


10:52 生硬 量 吉 WWEChat 全 10:53 
例题 DEMO 例 是 DEMO 
第 8 章 数据 缓存 API 第 8 章 数据 缓存 API 


5. 数据 清空 clearSstorage 的 简单 应 用 5. 数据 清空 clearStorage 的 简单 


wx.clearstorage 几 异步 清空 wx.clearSstorage( 异 步 消 宇 


数据 清空 


局 微 信 小 程序 开发 零 基础 入 门 


已 微 信 小 程序 开发 零 基础 入 门 


数据 已 清 室 ! 


(b) 页 面包 始 效 采 (c) 数据 清空 完成 


Console Sources Network Security Audits Storage AppData Wxml 


] 
] Value 


cd) 数据 清空 后 Storage 面板 的 效果 


图 8-9( 续 ) 


【代码 说 明 】 

本 示例 在 clearStorage.wxml 中 设置 了 <button> 组 件 进行 数据 的 清空 。 姑 
使 用 目 定义 函数 clearStorageO 进 行 本 地 缓存 数据 的 异步 清空 ， 并 给 出 提示 i 

在 图 8-9 中 ,图 (a) 是 清空 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 广 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 


i = 原 | 7 A i 7 了 i F 避 -二 F| 
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【 例 8-10】 数据 缓存 API 之 clearStorageSynec 的 简单 应 用 
WXML (pages/demo0S/clearStorageSync/clearStorageSync.wxml) 的 代 ; 


片段 如 下 : 
1. <view class='title'>5 .数据 清空 clearStorageSync 的 简单 应 用 </vie 
2. <View Class="'demo—box'> 
3 < 了 1eW class='title'>wxz.clearStoragdeSvync() 同步 清空 </view> 
4 <button tvpe="primary” bindtap—"clearsStorageSsync"> 数 据 消 空 - 
5. </view> 


多 一] 上 ET 请 


JS (pages/demo0S/clearStorageSync/clearStorageSync.js) 的 代码 片段 如 


Page ({ 
clearSstorageSync: function() I 
wx.ClearstorageSync (1) 7 
WwWX .ShowTIToasSt (1{ 
title: "数据 已 清空 1 '， 
1ICon: "mone 
上 ) 
} 
}) 


运行 效果 如 图 8-10 所 示 。 
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(a) 数据 清空 前 Storage 面板 的 效果 


第 8 章 数据 组 存 API 
5. 教 据 清 室 clearstoragesync 的 简单 应 


第 8 章 数据 缓存 API 
5. 圳 据 清 室 clearstoragesync 的 简单 应 用 
wearstora 避 eswncl 同 此 请 宝 


数据 请 室 


wx.clearstoraoesynecn 同 步 清 室 


加 机 入 小 程序 开发 村 基础 尺 | 


忆 焰 信 小 程 座 开 尾 守 基础 入 | 


Cb》 负面 初始 效 采 (ct) 数据 清空 完成 


[K Console Sources Network Security Audits Storage AppData Wxml 


(d) 数据 清空 后 Storage 面板 的 效果 
图 8-10 ”数据 清空 clearStorageSync 的 简单 应 用 
【代码 说 明 】 


本 示例 在 clearStorageSync.wxml] 中 设置 了 <button> 组 件 进 行 阁 
clearStorageSync.js 中 使 用 自 定 义 函 数 clearStorageSyncO 进 行 本 地 缓存 数据 | 


本 章 主要 介绍 小 程序 位 置 API 的 相关 知识 ， 包 括 如 何 获 取 位置 、 查 看 
图 组 件 控制 实现 地 图 中 心 坐 标的 获取 、 位 置 移动 、 动 画 标记 、 视 野 缩 放 等 : 
本 草 学 习 目 标 

上 理解 经 纬度 坐标 的 含义 ; 

。 了 解 坐标 类 型 wgs84 和 gcj02 的 区 别 ; 

e 掌握 获取 位 置 的 接口 的 使 用 方法 ; 

e 学 握 查 看 位 置 的 接口 的 使 用 方法 ; 

e 等 握 地 图 组 件 控制 的 系列 接口 的 使 用 方法 。 


CogT GEES 


9.1.1 经 纬度 坐标 


经 纬度 是 由 经 度 和 纬度 组 成 的 坐标 系统 ， 又 称 为 地 理 坐标 系统 ， 它 利 | 
定义 地 球 上 的 任意 角落 。 其 中 的 经 线 和 纬 线 都 是 人 类 为 度量 方便 和 目 定义 的 : 
为 子午 线 ， 是 连接 地 球 南北 两 极 的 半圆 踊 ， 指 示 南 北方 同 ， 纬 线 被 定义 为 ] 
随地 球 目 转 形 成 的 轨迹 ， 每 两 根 纬 线 之 则 均 为 两 两 平行 的 圆 形 ， 指 示 东 西 . 

例如 北京 市 东城 区 的 故宫 博物 院 ， 其 经 度 为 39.915390， 纬 度 为 116.3: 


9.1.2 ”坐标 的 类 别 


I We i | = Ws A er -人 FF TEL Lil Es 


了 5 微 信 小 程序 开发 零 基 础 入 门 已 


言 轧 系统 的 坐标 系统 。gcj 是 一 种 缩写 形式 , 由 3 个 词 的 拼 首 首 字 母 组 成 , 其 
(国家 )、c 指 的 是 cehu (测绘 )、j 指 的 是 ma ( 局 )。 这 是 一 种 加 入 随机 偏 ; 
度数 据 的 加 密 算 法 ， 凡 是 国内 出 版 的 各 种 地 图 系统 都 作 须 至 少 采 用 该 算法 
行 放 次 加 密 。 


全 9 9.2 ”获取 和 选择 位 置 


9.2.1 获取 位 置 


小 程序 使 用 wx.getLocation(OBJECT) 获 取 当 前 设备 的 地 理 位 置 、 速 度 : 
开 小 程序 后 ， 此 接口 无 法 调用 ; 当 用 户 单 击 “显示 在 聊天 顶部 ”时 ， 此 接 | 
其 OBJECT 参数 说 明 如 表 9-1 所 示 。 


表 9-1 wx.getLocation(OBJECT) 的 参数 
参数 说 明 
默认 为 wgs84 人 返回 gps 坐标 ，gcj02 返回 
. 不 
A 了 wx.openLocation 的 坐标 


ee 传 入 true 会 返回 高 度 信息 ， 由 于 获取 高 度 需要 多 
确 度 ， 会 减 慢 接 口 返回 的 速度 

success() 接口 调用 成 功 的 回调 函数 

fail() 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 痢 执行) 


successO 〇 回调 函数 返回 风 参 数 如 下 。 

。 latitude: 纬度 ， 浮 点 数 ， 范 围 为 -90 一 90， 负 数 表 示 南 纬 。 

。 longitude: 经 度 ， 浮 点 数 ， 范 围 为 -180 一 180， 负 数 表 示 西 经 。 

e speed: 速度 ， 序 上 点数， 单位 为 m/s。 

accuracy: 位 置 的 精确 度 。 

altitude: 高 度 ， 单 位 为 m。 

e verticalAccuracy: 垂直 精度 ， 单 位 为 m (Android 无 法 获取 ， 返 回 0 
horizontalAccuracy: 水 平 精 上 度 ， 单 位 为 m。 


注意 : altitude、verticalAccuracy 以 及 horizontalAccuracy 需要 1.2.0 及 


WXML (pages/demo01/getLocation/getLocation.wxml) 的 代码 片段 如 下 : 


1. <view class='title'>1 .获取 位 置 getLocation 的 简单 应 用 </Vview> 

2. <View Class="'demo—box'> 

3 <view Cclass='title'>wx.getLocation (OBJECT) </view> 

4. <map latitude='{{lat}}' longitude="'{{lon}}'></map> 
<button type="pPrimary" bindtap-"getLocation"> 获 取 位 置 </button> 
6. <View class='title' > 纬度 ， {{lat}}</view> 

<view Class="title'> 经 度 : {{lonll}</view> 

8. <view class='tit1le'> 速 度 : {{speed} }m/s</view> 

中 <View class='title'> 精 确 度 ， {{accuracy}}</view> 

10.</view> 


JS (pages/demo01l/getLocation/getLocation.js) 的 代 但 片段 如 下 : 


1 .Page ({ 

2 getLocation: function(})l! 

var that=this; 

4 wx.getLocationt(t! 

Se SUCCeSS: function(res) I 
6. that.setDatal(tl 

2 Jat:res.latitude, 

3 . lon: res.longitude, 

< Deegde Tes Speed, 

10. CCHrEACY : TES aCcCUracy 
I }) 

下 } 

3 }) 

14. 1} 

1 -二 


和 一 一 ” 


运行 效果 如 图 9-1 所 示 。 
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WxgetLocation(QBJECT) 


wx.getLoc 
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数据 ，4 个 <view> 组 件 分 别 用 于 显示 获取 到 的 纬度 、 经 度 、 速 度 和 精确 度 . 
中 使 用 自 定 义 函 数 getLocation0 获 取 当 前 设备 的 位 置信 息 ， 并 调用 set 
getLocation.wxml 页 面 上 。 

在 图 9-1 中 , 图 (a) 为 页 面 和 初始 效果 ， 此 时 尚未 获取 数据 ， 因 此 地 图 是 
为 首次 使 用 时 的 用 户 授 权 提 示 ; 图 (c) 为 获取 位 置 后 的 效果 ， 由 该 图 可 见 ) 
数据 ， 并 且 使 用 经 纬度 数据 更 新 了 地 图 画 夯 。 


9.2.2 ”选择 位 置 


小 程序 使 用 wx.chooseLocation(OBJECT) 打 开 地 图 选择 位 置 ， 该 接 
scope.userLocation。 其 OBJECT 参数 说 明 如 表 9-2 所 示 。 


表 9-2 wx.chooseLocation(OBJECT) 的 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 
pilO | Function | 否 | 接口 调用 失败 的 回调 函数 
completeO Fuction | 否 接口 调用 结束 的 回调 函数 (调用 成 ] 


success0 回 调 函 数 返 回 的 参数 如 下 。 

e hame: 位 置 名 称 。 

e address: 评 细 地 址 。 

。 latitude: 纬度 ， 浮 点 数 ， 范 围 为 -90 一 90， 负 数 表示 南 纬 。 

。 longitude: 经 度 ， 浮 点 数 ， 范 围 为 -180 一 180， 负 数 表 示 西 经 。 
wx.chooseLocation(OBJECT) 示 例 代 码 格式 如 下 : 


并 


I 


I 


1. wx.chooseLocationt(t 

success: function(res) I 

二 Var name=res .name 

4. var address=res.address 

Var latitude=res.1atitude 
6. Var longitude=res.1ongitude 
天 } 

8. 1}) 


【 例 9-2】 位 置 API 之 chooseLocation 的 简单 应 用 
WXMIL (pages/demo01/chooseLocation/chooseLocation.wxml) 的 代 伍 上 


var that=this; 

4. WX.ChooseLocationt(tl 

es Success: function (res) I 
0. that.setDatalt 

Fi name: res.name, 

9. address: res.address, 
: lJ]at: res.l1latitude, 
10. lon: res.longitude 
1 }) 

有 } 

1 3 

ge 

二 


(Ni 


i: 行 效 果 如 图 9-2 所 示 。 


16:44 
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Wx.chooseLocation(QBJECT) 


Die A 


Ti 


纬度 : 


经 度 : 
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(《a) 页 面 初始 效果 


图 9-2 


【 代 人 码 襄 明 】 


生产 | 之 抽 弟 
re ep 


腾讯 地 图 ” 


赣 通 - 友 观 花园 


于 湖 市 中 忠和 公国 


市 政务 文化 中 心 


Cb) 位 置 选择 器 
获取 位 置 chooseLocation 的 简单 应 用 


第 9 
1. 获取 位 置 choe 


wx.choosel 


在 呈 用 局 村 导 且 至 
| 


种 称 :去 


地 址 : 安徽 省 芜 计 
大 道 与 


纬度 
经 度 : 


外币 信 小 程 


(ec) 位 


本 示例 chooseLocation.wxml 中 的 <map> 组 件 用 于 喧 示 地 图 ，<button>: 


位 置 数据 ， 


4 个 <view> 组 件 分 别 用 于 显示 获取 到 的 名 称 、 地 址 、: 
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— sd 
参数 说 明 
a i 纺 度 ， 范 围 为 -90 二 99， 负数 表 示 
longitude | 经 上 肛 ， 汇 围 为 -180 一 180， 人 负数 表 


scale INT | 否 | 红 放 比例 ， 范 围 为 5 一 18， 默 认为 
name String 否 位 置 名 
address Sp 否 地 址 的 详细 说 明 


让 


wuccesg | Facetimm | 将 | 接口 调用 成 功 的 同调 函 攻 
fail0 Function | 否 | 接口 调用 失败 的 回调 函数 
complete() Function | 否 接口 调用 结束 的 回调 函数 (调用 成 


wx.openLocation(OBJECT) 示 例 代 码 格 式 如 下 : 


pa on 


| 


1. wx.getLocationl(t 

2. type: 'gcj02'，// 返 回 可 以 用 于 wx.openLocation{() 的 经 纬度 
success: function(res) I 

4. var latitude=res.1latitude 
i var longitude=res.l1ongitude 
0 wx.openLocationlt! 

条 latitude: latitude, 

3. longitude: longitude 

3. }) 

下 

11 .1}) 


【 例 9-3】 位 置 API 之 openLocation 的 简 蛙 应 用 
WXML (pages/demo02/openLocation/openLocation.wxml ) 的 代 公 所 | 
如 下 : 


-<view Class—"title'>2. 和 本 看 位 下 openLocation 的 简单 以 用 </view> 

. <VIiew Class='demo—box'> 

<view Class='title'>wx.openLocation (OBJECT) </view> 
<button type="primary"” bindtap="openLocation"> 查 看 当前 位 置 < 
. </view> 


nn 


JS (pages/demo02/openLocation/openLocation.js 的 代码 厂 段 如 下 : 


1. Page({ 
openLocation: functiont(} 1 
wx.getLocationl(l! 


[5 
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2. 查看 位 置 openLocation 的 简单 应 用 


Wx.openLocation(tOQBJECT) 


避 微 信 小 程序 开发 零 基 础 入 | ] 


辟 , 半 时 志 
5 性 


EE 
(1 查看 周边 
(a) 页 面 初 始 歼 果 (hb 查看 当前 位 置 


9-3 ”获取 位 置 openLocation 的 简单 应 用 


【代码 说 明 】 

本 示例 在 openLocation.wxml 中 包含 了 <button> 组 件 ， 用 于 单 击 查 
openLocation.js 中 使 用 目 定义 函数 openLocation0 〇 实现 如 下 功能 : 自 先 调 月 
获取 当前 设备 位 置 的 经 纬度 ， 然 后 调用 wx.openLocation0 打 开 对 应 的 地 图 1 

在 图 9-3 中 ， 图 (a) 为 页 面 初始 效果 ; (b) 为 单 击 “ 查 看 当前 位 ;: 
图 画面 ， 该 页 面 除 了 可 以 查看 地 图 以 外 ， 还 可 以 查看 周边 和 开启 导航 功能 . 


O09.4 地 图 组 件 控制 


9.4.1 获取 地 图 上 下 文 对 象 


小 程序 使 用 wx.createMapContext(mapld,this) 创 建 并 返回 地 图 上 下 隐 关 
mapContext 通过 mapId 跟 WXML 页 面 上 的 <map> 组 件 绑 定 ,并 可 以 进一步 
组 件 
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mapContext 对 象 包含 了 6 种 方法 用 于 操作 <map> 组 件 ， 其 方法 说 明 如 : 
表 9-4 mapContext 对 象 方法 
方 。 法 说 明 
系 ， 可 以 用 于 wx.openLocation( 
天 


Es 将 地 图 中 心 移动 到 当前 定位 点 ， 再 要 配合 习 
组 件 的 show-location 使 用 
translateMarker() OBJECT 平移 marker， 市 动画 


a 当 冯 fT 让 后 经 疆 腻 .1 反 有 虽 || 且 1 站 了 
getCenterLocation() OBJECT 获取 当前 地 图 中 心 的 经 纬度 , 返回 的 契 gcj02 


includePointsO 缩放 视野 展示 所 有 经 纬度 
getRegion() 获取 当前 地 图 的 视野 沁 围 
getScale() 获取 当前 地 立 的 缩放 级 别 


说 明 : 上 述 方 法 的 具体 使 用 将 在 9.4.2 一 9.4.7 节 进 行 详 细 介 绍 。 
9.4.2 ”攻取 地 图 中 心 坐标 


小 程序 使 用 getCenterLocation(OBJECT) 获 取 当 前 地 图 中 心 的 经 纬度 。] 
明 如 表 9-5 所 示 。 


表 9-5 getCenterLocation(OBJECT) 的 参数 


CE 证 
success() 接口 调用 成 功 的 回调 函数 ，res={ longitude: "经 度 
fail0 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 : 


【 例 9-4】 位 置 API 之 getCenterLocation 的 简单 应 用 
WXML (pages/demo03/getCenterLocation/getCenterLocation.wxml) 的 人 
码 片 段 如 下 : 


1. <viewclass='title'>3 .地 图 组 件 控制 getCenterLocation 的 简单 应 用 < /view: 
2. <View Cass= aqQemo 一 口 CD 和 > 

3 <view Cclass='title'>mapCtx.getCenterLocation (OBJECT) </vie 
Ee <map id='myMap'></map> 

5 <button type=" "primary™ bindtap="getCenterLocation"> 获 取 位 证 
6 <view class='title'> 纬 度 . {{lat}}</view> 

Re <view Class=title > 经 度 ， {{lonll}</view> 

8 .< /View> 


lz2. 1, 

13. onReady: function() | 

1 4. this.mapCtx=wx.createMapContext ("myMap' ); 
ee 

16.}) 


运行 效果 如 图 9-4 所 示 。 


es Wechat 1r22 lo00s Pe 


重重 委 二 看 Whiat 二 1r22 1008 
例题 DEMO “ee) 例 | 国 IDEMDD 本 
第 9 章 位 置 API 第 9 章 位 置 API 
3. 地 图 组 件 控制 getCenterLocation 的 简单 应 3. 地 图 组 件 控制 getCenterLocation 的 简 自 
用 用 


mapCtx.getCenterLocation(OBJECT) mapCtx.getCenterLocation(OQBJECT) 


Ww wa 
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经 度 : 经 度 : 116.46 
口 微 信 小 程序 开发 零 基础 入 门 局 微 信 小 程序 开发 零 基 础 入 门 
(a) 页 面 初始 效 采 pb)》 获取 地 图 中 心 的 经 纬 有 


9-4 ”地 图 组 件 控制 getCenterLocation 的 简单 应 用 


【代码 说 明 】 
本 示例 在 getCenterLocation.wxml 中 包含 了 <map> 组 件 且 声明 1d='myl] 


下 文 进行 绑 定 ， 在 地 图 下 方 使 用 <button> 组 件 用 于 单 击 查看 地 图 中 心 的 经 
用 于 显示 得 到 的 经 纬度 数据 。 在 getCenterLocation.js 中 使 用 目 定 义 困 数 : 
实现 如 下 功能 : 首先 调用 this.mapCtx.getCenterLocation0 著 取 当 前 地 图 组 付 
然后 使 用 setData0 方 法 将 经 纬度 数据 泻 染 到 getCenterLocation.wxml 上 。 


在 图 9-4 中 ， 图 (a) 为 页 面 初 始 效 末 ， 此 时 地 图 会 默认 最 示 北 各 地 区 


“ 蒜 取 人 位置” 按钮 区 取经 纬度 数据 后 的 国 面 ， 由 该 图 可 见 <map= 组 件 周 认 提 ]] 


下 微 信 小 程序 开发 零 基础 入 门 


人 


<button type="primary” bindtap=" "moveToLocation™ > 移动 位 置 </1 
</view> 


JS (pages/demo03/moveToLocationmoveTIoLocation.js) 的 代码 片段 如 


Page (1{ 
moveToLocation: function() 1{ 
this.mapCtx.moveToLocation(); 
} ， 
onReady: function() { 
this.mapCtx=wx.createMapContext ('myMap'); 
} 
}) 


运行 效果 如 图 9-5 所 示 。 


全] 证 大 亲 训 下 Ch at 把: :13 TOW, i 
例 三 DEMDD 例题 DEMO (a 
第 9 章 位 置 API 第 9 章 位 置 API 


3. 地 图 组 件 控制 moveToLocation 的 简单 应 用 3. 地 图 组 件 控 制 moweTeLocationm 的 简单 应 | 


mapCtx.moveToLocation 人 


圭 笃 喊 


mapCtx.moveToLocation!) 


索 末 市 晶 二 中字 
让 请 让 


eT = 
和 湖 忧 雇 避 园 


柏 庄 财富 广场 


EE nq 


Wii nn 口 微 信 小 程序 开发 零 基础 入 门 
(a) 负面 初始 效果 (b) 移动 到 当前 定 


图 9-5 ”地 图 组 件 控制 moveToLocation 的 简单 应 用 


【 代 人 码 说 明 】 


| i Ee PN | A ，，  - 玫 蝇 AH- 画 | 于 - 日 日 ge EE i 


表 9-6 translateMarker(OBJECT) 的 参数 


参数 说 明 
markerd 开赴 标 训 
destination 指定 标记 移动 到 的 目标 点 
autoRotate 移动 过 程 中 是 否 目 动 旋转 标记 
rotate 标记 的 旋转 角度 
duration 动 田 持 续 时 长 ， 默 认 值 为 1000ms， 平 :; 
animationEnd() 动画 结束 的 回调 函数 
fail() 接口 调用 失败 的 回调 函数 


【 例 9-6】 位 置 API 之 translateMarker 的 简单 应 用 
WXML (pages/demo03/translateMarkertranslateMarkerwxml) 的 代码 卢 


段 如 下 : 


户 La 请 


下] 


. <view class='title'>3 .地 图 组 件 控制 translateMarker 的 简单 应 用 < /view: 
。 <V1iew Class='demo—box'> 


<view Class='title'>mapCtx.translateMarker (OBJECT) </view> 
<map id="myMap" latitude="'{{lat}}" longitude="{{lon}}" ma 
'{ {markers}}'></map> 

<button type="pIrimary™ bindtap="translateMarker"> 平 移 标 记 <,， 


. </view> 


JS (pages/demo03/translateMarkertranslateMarkerjs) 的 代码 片段 如 下 : 


Page ({ 
data: I 
lat: 39.917940, 
lon: 11l6.39711L40. 
markers: |I1 
0- 站 王 
latitude: 39.911810, 
longitude: 116-394800， 
iconPath: '/images/demo03/location.png', 
label: 1 
content: ' 故 宫 博 物 阮 " 
} 
上 
}， 
translateMarker: function() { 
this.mapCtx.translateMarker (1{ 
markerId: "001', 
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第 9 章 位 置 API 
3. 地 图 组 件 控制 translateMarker 的 简 : 


第 9 章 位 置 API 
3. 地 图 组 件 控制 translateMarker 的 简单 应 用 


| 


mapCtx,.translatelvlarker(QBJEC 


避 微 信 小 程序 开发 零 基础 入 门 吕 微 信 小 程序 开发 零 基础 入 门 
Ca) 页 面 初始 效果 Cb》 平移 标记 


9-6 ”地 图 组 件 控制 translateMarker 的 简单 应 用 


【代码 膏 明 】 

本 示例 在 translateMarkerwxml 中 包含 了 <map> 组 件 且 正明 1d='myMap'| 
进行 缚 定 ， 和 在 地 图 下 方 使 用 <button> 组 件 用 于 平移 标记 。 在 translateMarkel 
初始 化 地 图 的 经 纬度 在 中 山 公 园 附 近 (39.917940,116.397140)， 并 使 用 率 杯 
在 该 位 置 显示 标记 , 同时 使 用 目 定义 函数 translateMarker0 根 据 markerId 指 ; 
并 移动 到 北京 故宫 博物 院 附 近 (39.917940,116.397140)， 其 动画 效果 持续 ] 

在 图 9-6 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 标记 显示 在 中 山 公 园 附 近 ; EF 
移 标记 ”按钮 平移 标记 后 的 画面 ， 由 该 图 可 见 标 记 己 经 被 移动 到 了 新 的 位 - 


9.4.5 ”展示 爹 部 坐标 


小 程序 使 用 includePoints(OBJECT) 展 示 所 有 指定 的 经 纬度 ， 必 要 时 会 : 
其 OBJECT 参数 说 明 如 表 9-7 所 示 。 


表 9-7 includePoints(OBJECT) 的 参数 


6. </view> 


JS (pages/demo03/includePoints/includePoints.js) 的 代码 上 请 段 如 下 : 


Page (1{ 
includePoiints: function() I 
this.mapCtx.includePoints (i 

padding: [10], 

points: [1{ 
/7 安徽 黄山 风景 区 
latitude: 30.129590， 
longitude: 118-174940 


。 | ， 1 
10， /7 安徽 九 华 山 风 景区 
和 latitude: 30.411110, 
于 之 二 longitude: 17-804250 
13. } | 
14. }) 
15. 上， 
1l16. onReady: functiont(t} 1{ 
a this.mapCtx=wx .createMapContext ('myMap ' ); 
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3. 地 图 组 件 控制 includePoints 的 简单 应 用 3. 地 图 组 件 控 制 includePoints 的 简单 应 
mapttx.includepoints(OQHJEC1) mapCtxincludePoints(OBJECT) 
二 n pa TE 
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图 9-7 (a) 为 页 面 初始 效 未 ， 此 时 地 图 会 款 认 显示 为 北 乐 地 区 : 图 9- 
展示 指定 经 纬度 后 的 画面 ， 由 图 可 见 由 于 地 理 位 置 足 度 较 大 最 示 了 页 山区 
和 池州 市 《 九 华山 所 在 地 区 )。 


9.4.6” 钛 取 视野 范围 
小 程序 使 用 getRegion(OBJECT) 著 取 当 前 地 图 的 视野 范围 ， 其 OBJECT 2 


表 9-8 getRegion (OBJECT) 的 参数 


参数 说 _ 明 


z | SW i 接口 调用 成 功 的 回调 图 数 ，res={southwest nort 
success() unction 呈 东北 角 的 经 纬度 
failO 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执 : 


【 例 9-8】 位 置 API 之 getRegion 的 简单 应 用 
WXML (pages/demo03/getRegion/getRegion.Wxml) 的 代码 片段 如 下 : 


. <view class='title'>3. 地 图 组 件 控制 getRegion 的 人 简单 应 用 </view> 
<View Class="'demo—box'> 

<View class='title'>mapCtx.getRegion (OBJECT) </view> 

<map id="'myMap'></map> 

<button type="primary™ bindtap="getRedion"> 煞 取 视 野 范 围 < /bu 


. </view> 


DY 


JS (pages/demo03/getRegion/getRegion.js) 的 代码 片段 如 下 : 


Pagett 
getRegion: tunctlon() { 
this.mapCtx.getRegion (1 
success:function(e)lt 
Console.l1og(e) 
} 
}) 
上 ， 


onReady: function() 1{ 


‘DD 


10. this.mapCtx=wx.createMapContext ('myMap ' ); 
LW 
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i he lbh sa 


区 中 医 医 a Let | 
北京 朝阳 医院 时 让 


局 微 信 小 程序 开发 零 基础 六 门 


(a) 页 面 初 始 歼 : 


[K Console Sources Network Security Audits Storage AppData Wxml 


QO top 和 Filter Default level 
vf{errmsg: "getMapRegion:ok", southwest; 1.}, northeast: 1..}} 
errMse: "getMapRegion:ok" 
bnortheast: {longitude: 116.4742478942871, latitude:; 39.926582392689594 ) 
: 39.913416974598766 


Pb southwest: {lonegitude: 116.44575218571288, latitude: 


bE proto : Object 


| 


(b》Console 控 市 台 获 取 地 图 视野 有 泄 围 
9-8 地 图 组 件 控制 getRegion 的 简单 应 用 


9.4.7” 钛 取 地 图 缩放 级 别 
小 程序 使 用 getScale(OBJECT) 获 取 当 前 地 图 的 缩放 级 别 ,其 OBJECT 2 


表 9-9 ”getScale(OBJECT) 的 参数 
| 瑞 可 | 训 - 克 一 
success() Function | 否 | 接口 调用 成 功 的 回调 函数 ，res={scale} 
bil0 | Fmction | 否 | 楼 口 调用 失败 的 回调 函数 
人 


:I eed 


启 | 巩 


本 


2 ” 微 信 小 程序 开发 零 基础 入 门 


1. Page l(t 

2 etEsecale: Fnctionty { 

总 Var that=this; 

4. this.mapCtx.getSscale(l 

2 success: function (res) I 

6 let scale=res.scale; 
that.setData({scale:scalel}) 


。 } 
9. }) 
10. 上 
11- onReady: functiont(} 1 
下 七 DIS -maPC 七 和 一 WX -CIeateMapPConteXt ( myYMapPp  ) 
主 
14.}) 


运行 效果 如 图 9-9 所 示 。 
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3. 地 图 组 件 控制 qetScale 的 简单 应 月 


mapCtx.getScale(OBJECT) 


mapCtx.getscale(OBJECT) 
| 区 中 医 医院 名 


We 
区 中 医 医 院 


© 
北京 朝阳 医院 


一 北京 朝阳 医院 EE 
Ts Fe 加 是 
大 朝 外 SOI 京 广 本 
情 | 
路 Te 
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寺 贸 了 


缩放 级 别 | : 缩放 级 别 : 14 
已 微 信 小 程序 开发 委 基 础 入门 所 微 信和 小 程序 开 点 零 基 础 入 | ] 
(a) 页 面 初始 效果 (b) 获取 地 图 缩放 级 别 


图 9-9 地 图 组 件 控制 getScale 的 简单 应 用 


【代码 说 明 】 
本 示例 在 getScale.wxml 中 包含 了 <map> 组 件 且 声明 id='myMap'，<but 
全 下 贞 攻 2T2 人 只 | -一 av 有田 于 百 击 机 至 | 的 拖 攻 和 六 28 员 | 在 gaetQnale ic 1 


本 章 主要 介绍 小 程序 设备 API 的 相关 知识 ， 包 括 系 统 信息 、 网 络 、 传 
EA 


。 学 握 系统 信息 获取 和 兼容 性 判断 的 接口 用 法 ; 

。 掌握 网 络 状 态 和 Wi-Fi 管理 的 接口 用 法 ; 

e@ 掌握 罗盘 和 加 速度 计 的 接口 用 法 : 

。 掌握 用 户 截屏 、 扫 码 、 剪 切 /粘贴 和 通话 的 接口 用 法 : 
e 等 握手 机 内 存 、 屏 幕 竞 度 和 振动 管理 的 接口 用 法 .。 


ae 
10.1.1 芍 取 系统 信息 


异步 获取 
小 程序 使 用 wx.getSystemInfo(OBJECT) 异 步 获取 系统 信息 ， 其 OBJE 
所 示 ， 


10-1 mene (OBJECT) 的 参数 


参数 说 明 
success0 Po 接口 调用 成 功 的 回调 函数 
failO Function | 否 | 接口 调用 失败 的 回调 函数 _ 


Lr EE DCD hE Fg = st “EE DD ci = 


D3 | A 
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e platform: 客户 冰 平 侣 。 
。 fontSizeSetting: 用 户 字 体 大 小 设 半 ,以 “我 一 设 兽 一 退 用 一 字体 大 
单位 为 px，1.5.0 版 本 以 上 支持 。 
e SDKVersion: 客户 疹 基 础 库 厂 本 ，1.1.0 版 本 以 上 支持 。 
团 同步 获取 
小 程序 使 用 wx.getSystemInfoSync(OBJECT) 同步 获 
OBJECT 参数 和 卉 步 获取 的 successO 回 调 参数 完全 相同 。 
【 例 10-1】 设备 API 之 获取 系统 信息 的 简单 应 用 
视频 讲解 WXML (pages/demo01/getSysInfo/getSysInfo.wxml) 日 


.<View class='title'>1 .系统 信息 </view> 

. <View Cass= aemo 一 boX > 
<view class='title'> 狱 取 系 统 信 息 </riew> 
<button type="primary” SlzZe~= mlnl- bindtap="getSsysInfo"> 异 
<button type="primary” size= mini' bindtap="getSysInfoSync">E 
<button type="primary” SizZe= "mini’ bindtap"reset"> 清 空 结 红 
<view class='title'> 于 机 品牌 : {{res.brandl}l}</view> 
<view class='title'>3 手 机 型 号 : {{res.modelltl}</view> 
<view class='title'> 操 作 系 统 : {{res.system} }</view> 

0. <view class='title'> 客 户 问 平台 : { {res.platform} }</view> 

1 .</view> 


Ee 


WXSS (pages/demo01/getSysInfo/getSysInfo.wxss〉 的 代码 片段 如 下 : 


1 。 buttont 
margin: lO0rpx; 


[5 


3 


JS (pages/demo0l/getSysInfo/getSysImnfo.js) 的 代码 上 请 段 如 下 : 


Page (1{ 
// 弄 步 夕 取 系 统 信忠 
getSysInfo: function() 1{ 
Var that=this 
wx.getSystemInfol(l! 
Success: function(res) I 
that.setDatal({ res: res 上) 
}, 
}) 


= 


ee 
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获取 系统 信息 获取 系统 信息 区 
| | 导 步 查询 用 
手机 品牌 : 手机 品牌 : iPhone 手机 .6 
手机 型 号 : 手机 型 号 : iPhone 6s<iPhone8,1> 手机 如 
操作 系统 ; 操作 系统 : iOS 11.4.1 操作 系 
客户 端 平台 : 客户 端 平台 : ios 客户 冰 
@ 微 信 小 程序 开发 零 基础 入 门 @ 微 信 小 程序 开发 零 基础 入 门 曲 微 信人 小 
(a) 页 面 初始 效果 (b) 真 机 查询 结果 (c) 开发 


图 10-1 获取 系统 信息 的 简单 应 用 


【代码 说 明 】 

本 示例 getSysInfo.wxml 中 的 3 个 <button> 组 件 分 别 用 于 异步 、 同 步 查 :1 
空 结 末 ，4 个 <view> 组 件 分 别 用 于 显示 获取 的 手机 品牌 、 手 机 型 号 、 扎 作 乔 
在 getSysInfo.js 中 使 用 目 定 义 函 数 getSysInfo0 和 getSysInfoSyncO 分 别 异 步 : 
省 的 系统 信息 ， 并 调用 setData(0) 方 法 渔 染 到 getSysInfo.wxml 页 面 上 。 

企图 10-1 中 ， 图 (a) 为 页 面 初 始 效 采 ， 此 时 疝 未 获取 数据 ;图 (b) 
图 〈c) 为 开 友 痢 工 具 和 模拟 结 有 末 ， 由 该 图 可 见 均 成 功 获 取 到 了 相关 数据 。 


10.1.2 canlUsel() 


小 程 厅 使 用 wx.canIUse(Strng) 判 断 小 程序 的 API、 回 调 、 有 参数、 组 件 : 
可 用 ， 该 接口 从 基础 库 1.1.1 版 本 开始 文 持 。 
其 中 Strng 参数 调用 有 两 种 形式 ， 即 ${API}.${method}.$ {pa 


也 3 微 信 小 程序 开发 零 基础 入 门 


wx.CanIUSe( GetSystemIntoSync .Teturn .ScreenwW1ldth  ) 
wx.CanlUse( getSystemInfo.success.screenWidth") 
WwWwX.CanlUsel('" showToast.object.image') 

wxX.CanlUse( "onCompasscCchange.callback.direction") 
wxXx.CanlUsel('" request.object .method.GET") 


//${component}.${attribute}.s${option)} 
wxX.CanlUsel('" live-player') 
WX.CanIUse('text.selectable'") 
WX.CanlUsel( button.open-—type.contact") 


【 例 10-2】 设备 API 之 canIUse 的 简单 应 用 
WXMIL (pages/demo01/canIUse/canIUse.wxml)〉 的 代 和 全 


TH 面 Es 时 
回 rh 用 二 


a i <View class='title'>1. 系统 信息 </view> 
站 <View Class='demo—box'> 
视频 讲解 二 | ; ee , 
3 <Vliew Class='title'>canlUse 判 汤 < /view> 


<input bindblur="inputBlur" placeholderQ=" 请 输入 需要 判断 的 内 邓 
<button type="primary" bindtap-"canIUse"> 查 区 </button> 
<View class='title'4> 查 区 结果 ， { {result}}</view> 

< /View> 


= 上 已 


JS (pages/demo01l/canIUse/canIUse.js) 的 代 但 上 请 段 如 下 : 


Page ({ 
data: 1{ 
result: ! 符 查询 ， 
}, 


/ /初始 化 输入 框 内 容 

7nBUultVvValues "yy 

/ /获取 输入 框 内 容 

inputBlur: function(e) 1 
this.inputValue=e.detail .value 


Dm] 


上 一 
人 


上 
11. /V/ 查 询 兼容 性 
12. canIUse: function() f 
Ls let txt=this.inputValue 
14. i 下 {tt=="”") { 
二 WwWX -ShowTIoast ({ 
16. title: ' 输 入 框 不 能 为 空 '， 
EY lcon: ‘none'" 
18. }) 
I } else I 


sh Te Tec]1|1 二 二 ws "man TITees [thi ee 1 na | 1 
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1. 系统 信息 1. 系统 信息 


canlUse 判 | 断 | canIUse 判 断 
哺 输 入 需 雪 判断 的 内 容 请 输入 需要 判断 的 内 容 
查询 结果 : 待 查询 查询 结 里 ， 丢 查 放 音 鹿 


加 牧人 入 小 程序 开发 零 基础 六 | 已 让 介 a 开 居中 | 加 和 袜 [ 信 小 * 御 


(a) 页 面 初 始 效果 (b) 未 输入 内 容 的 提示 (c) 查 
10-2 ”canlUse 的 简单 应 用 


在 图 10-2 中 ， 图 (a) 为 页 面 初始 效 打 ， 此 时 是 竺 得 询 状 态 ;: 图 (b) - 
容 的 氏 误 提示 ; 图 (c) 为 租 询 结果 ， 由 访 图 可 见 button.open-type 在 当前 1 
可 以 目 行 输入 接口 或 组 件 内 容 进行 判断 。 


Do102 网 络 | 


10.2.1 网络 状 态 


获取 网 络 类 型 
小 程序 使 用 wx.getNetworkType (OBJECT) 获取 网 络 类 型 ， 其 OBJE 
所 示 。 


本 微 信 小 程序 开发 零 基础 入 门 


-i 


/ /返回 网 络 类 型 
/ /其 有 效 但 为 wifi、2g、3g、4g、unknown (Android 下 不 常见 的 网 络 类 于 


var networkType~=res.networkType 
} 
}) 


监听 网 络 状态 变化 
小 程 厅 使 用 wx.onNetworkStatusChange(CALLBACK) 旺 听 网 络 状态 变 " 


库 1.1.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。CALLBACK 参数 说 明 如 表 10-: 


Ha 请 


] 晤 本 


表 10-3 wx.onNetworkStatusChange(CALLBACK) 的 参数 


参 数 | 类 型 说 明 


isConnected 当前 是 人 否 有 了 网络 连接 
networkType 网 络 类 型 ， 有 效 值 为 wifi、2g、3g、4g、 


【 例 10-3】 设备 API 之 获取 网 络 状 态 的 简单 应 用 
WXML (pages/demo02/getNetworkType/getNetworkTyp 
段 如 下 : 


1. <view class='title'>?. 网 络 </view> 
<Vlew Class='demo—box'> 


<view class='title' > 获取 网 络 信 息 </view> 
<View class='status'> 当 前 网 络 状态 ， {{status}}</view> 
. </view> 


WXSS (pages/demo02/getNetworkType/getNetworkType.wxss) 的 代 人 上 


-Statust 
Tont— sl17es SOrTDX> 
margin:20rpx; 

} 


JS (pages/demo02/getNetworkType/getNetworkType.js) 的 代码 上 户 段 如 1 


Page ({ 
data: I 
status: 5 获取 中 ， 
}, 


onLoad: function(options) I 
var that=this 
+ rr pry she es a rs os op 


运行 效果 如 图 10-3 所 示 。 


21:42 本 2143 
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第 10 章 设备 API 第 10 章 设备 API 第 10 轩 
2. 网 络 2. 网 络 


获取 网 络 信 息 获取 网 络 信 息 获取 
当前 网 络 状态 : Wi-Fi 当前 网 络 状 态 : 4G 当前 网 络 ; 


书 微 情 小 程序 开发 零 基础 入 门 口 微 信 小 程序 开发 零 基础 入 门 心 微 信 小 程 / 


(a) 页 面 初始 效果 (b) 切换 到 4G 网 络 状 态 (c) 切换 : 
图 10-3 ”获取 网 络 状态 的 简单 应 用 


【代码 说 明 】 

本 示例 在 getNetworkType.wxml 中 包含 了 <view> 组 件 显 示 获 取 的 区 
getNetworkType.js 的 data 中 定义 status 的 初始 值 为 “获取 中 ”。 在 onLoad 
wx.getNetworkTypeO 〇 获取 当前 网 络 状 态 信 息 ， 并 调用 setData 
getNetworkType.wxml 页 面 上 ; 然后 使 用 wx.onNetworkStatusChang0O 〇 监听 网 
如 末 断 网 则 显示 “未 联网 ”， 人 否则 时 示 对 应 的 网 络 关 型 。 

在 图 10-3 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 网 络 状态 为 Wi-Fi， 然 后 
拟 絮 进行 网 络 切换 ; (b) 为 切换 到 4G 网 络 状态 : (c) 为 未 联网 状 双 


10.2.2 WiFi 


Wi-Fi 是 Wireless-Fidelity (无 线 保 真 ) 的 缩写 形式 ， 饭 是 一 种 允许 电 : 
TT 二 二 7 半日 月 记忆 十 二 于 | 二 一 一 下 
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接 口 说 明 
wx.connectWifi(OBJECT) 连接 Wi-Fi， 该 接口 从 基础 库 1.6.0 开始 文 持 
wx.onWifiConnected(CALLBACK) 监听 连接 上 Wi-Fi 的 事件 
WX.getConnectedWifi(OBJECT) 获取 已 连接 中 的 Wi-Fi 信息 ， 从 基础 库 1.6.0- 


设备 连接 Wi-Fi 时 接口 调用 的 顺序 如 表 10-5 所 示 。 
表 10-5 连接 Wi-Fi 时 接口 调用 的 顺序 


设备 平台 连接 指定 Wi-Fi 连接 周边 
startWifi()— getWifiList() 
connectWifi()—onWifiCo 
startWifi()— getWifiList() 
setWifiList() — on Wif1iCo1 
及 11.1 版 本 因 系 统 原因 


Android startWifi()— connectWifi()— onWifiConnected() 


Ne startWifi() — connectWifi() — on WifiConnected() 
1 


( 仪 iOS 11 及 以 上 版 本 文 持 ) 


打开 /关闭 Wi-Fi 
小 程序 分 别 使 用 wx.startWifi(OBJECT) 和 wx.stopWifi(OBJECT) 打 开 和 
个 接口 的 OBJECT 参数 完全 相同 ， 说 明 如 表 10-6 所 示 。 


表 10-6 OBJECT 参数 
参数 说 明 


fail0 接口 调用 失败 的 回调 函数 
complete0 接口 调用 结束 的 回调 函数 (调用 成 功 与 
Wi-Fi 列表 
1) 获取 Wi-Fi 列表 
小 程 订 自 先 使 用 wx.getWifiList(OBJECT) 请 求 获 取 Wi-Fi 列表 ， 其 参 
相同 。 
2) 监听 Wi-Fi 列表 数据 
然后 需要 配合 使 用 wx.onGetWifiList(CALLBACK) 监 昕 在 获取 到 Wi-F 
件 ， 并 在 回调 中 返回 Wi-Fi 列表 数据 。 其 中 CALLBACK 参数 说 明 如 表 10- 


老 10-7 wx onGefyvyifilistfCAI1BACKII 反 器 会 镭 


4 


3) 设置 AP 信息 
小 程序 利用 wx.setWifiListtOBJECT) 在 onGetWifiListO 回 调 后 设置 wifi 


信息 ， 它 古 1OS 的 特有 接口 。 坊 接口 从 基础 库 1.6.0 开始 文 持 ， 低 版 本 十 


其 OBJECT 参数 说 明 如 表 10-9 所 示 。 


表 10-9 wx.setWifiList(OBJECT) 的 参数 


参数 说 __ 明 
wifiList 提供 预 设 的 Wi-Fi 信息 列表 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() 


所 


II 芭 | 丙 


接口 调用 结束 的 回调 函数 (调用 | 
其 中 wifiList 是 数组 类 型 ， 每 个 数组 元 系 的 属性 如 表 10-10 所 示 。 
表 10-10 ”Wi-Fi 列表 项 说 明 表 


参数 说 明 


SSID String Wi-Fi 的 SSID 


BSSID Wi 的 BSSID 
pasoword Wi 设备 密码 


注意 事项 如 下 : 
(1) 该 接口 只 能 在 onGetWifiListO 回 调 之 后 调用 。 
(2) 此 时 客户 峰会 挂 起 ， 等 竺 小 程序 设置 Wi-Fi 信息 ， 请 务必 尽快 调 | 


据 请 传 入 一 个 空 数组 。 


(3) 有 可 能 随 着 周边 Wi-Fi 列表 的 刷新 ， 单 个 流程 内 收 到 多 次 带 有 存 


表 的 回调 。 


多 = 人 上 ET 请 


- WX-.OnGetWifiList ICLtUnctaIonresS) 1 


i (res.wifiList.length}) { 
WX. SetWIifiListr(t1 
wifiList: [1 
SSID: res.wifiList[0| .SSID， 
BSSID: res.wifiList[0| .BSSID, 
Password: "123456" 
}] 
}) 


微 信 小 程序 开发 零 基础 入 门 


表 10-11 wx.connectWifi(OBJECT) 返 回 参 数 


参数 说 了 明 
SSID String Wi-Fi 设备 SSID 
BSSID Wi-Fi 设备 BSSID 
password Wi-Fi 设备 密 公 


success() 接口 调用 成 功 的 回调 函数 
Big 捷 口 调用 失败 的 同调 函数 
complete() ”Function | 否 接口 调用 结束 的 回调 函数 (调用 成 
2) 监听 连接 Wi-Fi 事件 
小 程 厅 使 用 wx.onWifConnected(CALLBACKE) 监 听 连 接 上 Wi-Fi 的 事 ， 
库 1.6.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。CALLBACK 参数 说 明 如 表 10-1 


表 10-12 wx.onWifiConnected(CALLBACK) 返 回 参 数 


全 数 | 类 型 说 明 


wifi Object Wi-Fi 信息 


iL| 各 


I 


I 


到 


I 


Wi-Fi 对 象 的 属性 如 表 10-13 所 示 。 
表 10-13 ”Wi-Fi 对 象 属性 


CE 副本 
SSID Wi-Fi 的 SSID 
BSSID Wi-Fi 的 BSSID 
secure Wi-Fi 是 否 安全 
sienalStreneth Wi-Fi 信号 强度 


3) 获取 已 连接 Wi-Fi 信息 
小 程序 使 用 wx.getConnectedWifi(OBJECT) 获 取 已 连接 中 的 Wi-Fi 信息 
1.6.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-14 所 


表 10-14 wx.getConnectedWifi(OBJECT) 的 参数 
多 开关 记 F 砚 
接口 调用 成 功 的 回调 函数 ， 返回 Object 
六 回调 wf 的 具体 信息 ， 见 前 面 的 表 10-1 


failO 接口 调用 失败 的 回调 函数 


口 
compnletefN Fimection 人 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 : 


success() Function 


羔 
幢 


错 误 码 


视频 讲解 


V1EeW 
V1iewWw 
Yl1iewWw 


< 让 1EW 


‘DD oo 有] i I 


a < 了 EU 
10.</view> 


© 


Android 特有 ， 未 打开 GPS 定位 开关 
用 户 拒绝 授权 链接 Wi-Fi 

无 效 SSID 

系统 运营 商 配置 拒绝 连接 Wi-Fi 
系统 其 他 错误 ， 需 要 在 errMsg 打印 具 


weapp in backeround 应 用 在 后 台 无 法 配置 Wi-Fi 


wifi not tumed on Android 特有 ， 未 打开 Wi-Fi 开关 


备注 


【 例 10-4】 设备 API 之 Wi-Fi 的 简单 应 用 
WXML (pages/demo02/wifywif wxml) 的 代码 片段 如 


<view Class='title'>2 .网络 </view> 

<View Cass= aqemao 一 DOX > 
<view class='title'>Wi-Fi 的 简单 应 用 < /view> 
<button type="'primary" bindtap~="'getWifiInfo, 
</button> 

class="Status SI Ierrorll< /view> 

class='status' >SSID: {{res.SsSSsID}}</view> 

class='status'"'>BSSID: {{res.BSSID}}</view> 

class='status'> 安 全 性 : {{res.securel}l}</view> 


class="'status"'> 信 号 强度 : {{res.signalstrength}}</vienw 


忆 


WXSS (pages/demo02/wify/wifi.wxss) 的 代码 片段 如 下 : 


.Status 


户 La 捕 


} 


{ 


text—align: left; 
margin: J]orpx; 


JS (pages/demo02/wifywifi.js》 的 代码 片段 如 下 : 


Page ({ 


GE La 请 


GetWiftiInto: function() { 
var that=this 
wx.getConnectedWifi l(t 
Success: function(res) I 
that.setDatal({ res: res.wifi 上 二) 


了 3 微 信 小 程序 开发 零 基础 入 门 “ 丰 ye 


当前 为 Wi-Fi 已 连接 状态 ， 由 该 图 可 见 成 功 获 取 到 了 相关 数据 。 


三 了 上 26% 面 wl 中 国电 信 宇 下 午 8:58 
例题 DEMO 例题 DEMO 
第 10 章 设备 API 第 10 章 设备 AP| 
2. 网 络 2. 网 络 

Wi-Fi 的 简单 应 用 


Wi-Fi 的 简单 应 用 


获取 Wi-Fi 状 态 获取 Wi-Fi 状 态 
SSID: SSID: TP-LINK_305 
BSSID: BSSID: 50:bd:5f:87:93:2e 
安全 性 : 安全 性 : true 
信和 号 强度 : 信和 号 强度 : 0.8286325931549072 
@ 微 信 小 程序 开发 零 基础 入 门 @ 微 信 小 程序 开发 零 基础 入 门 
(a) 页 面 初始 效果 (b) 获取 Wi-Fi 状态 


图 10-4 ”Wi-Fi 的 简单 应 用 


10.3.1” 罗 楷 


开启 罗盘 监听 
小 程序 使 用 wx.startCompass(OBJECT) 开 始 监 听 罗 盘 数 据 ， 其 OBJEC 
所 示 。 


== Pr 匡 关 陡 天 站 王 医改 辐 | 记 关 本 在 各 -玉手 


CO 


其 中 CALLBACK 返回 参数 direction, 该 参数 是 Numb 
的 方 同 度数 。 

【 例 10-5】 设备 API 之 罗盘 的 简单 应 用 

WXML (pages/demo03/compass/compass.wxml) 的 人 人 下 


视频 讲解 1. <view class='title'>3. 传 感 器 </view> 
2. <View Class="demo—box'> 
3 <view class='title'> 狱 取 多 盘 信 息 </Triew> 
4. <view Class='status'> 当 前 方 同 是 : { {degree}}</view> 
5. </view> 


WXSS (pages/demo03/compass/compass.wxss) 的 代码 片段 如 下 : 


1 。 .statust 
tont—sizer D0rpas 
margin:20rpx; 


} 


户 I 


JS (pages/demo03/compass/compass.js) 的 代码 睛 段 如 下 : 


Page (1 
onLoad: function{(options)} I 
var that=this 
wx.onCompassChange (function (TeES) { 
that .setData({degree:res.direction}) 
}) 
} 
} ) 


DD] 


真 机 测试 运行 效果 如 图 10-5 所 示 。 


wl 中 国电 信 学 下 年 9:47 


例题 DEMO 
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第 10 章 设备 API 


3. 传感器 3. 传感器 
获取 罗盘 信息 获取 罗盘 信息 
当前 方 回 是 : 当前 方向 是 : 

4.9795002937316895 236.20668029785156 


名 微 信 小 程序 开发 要 基础 入 门 久 微 信 小 程序 开发 零 基 础 入 门 
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【代码 训 明 】 

本 示例 在 compass.wxml 中 包含 了 一 个 <view> 组 件 用 于 显示 当前 的 手 ; 
态 数 据 是 {{degree}}。 在 compass.js 的 onLoad0O 国 数 中 调用 wx.onCompass 
的 多 盘 信 息 ， 并 使 用 setData0 方 法 泻 染 到 compass.wxml 页 面 上 。 


10.3.2 ”加 速度 计 
开启 加 速度 数据 监听 


小 程序 使 用 wx.startAccelerometer(OBJECT) 开 始 监听 加 速度 数据 ， 访 接 
开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 如 表 10-17 所 示 。 


表 10-17 wx.startAccelerometer(OBJECT) 的 参数 
参数 说 明 
interval 否 监听 加 速度 数据 回调 函数 的 执行 频率 ( 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 


其 中 interval 的 有 效 伍 如 下 。 

e game: 适用 于 更 新 话 戏 的 回调 频率 ， 在 20ms/ 座 左右 。 

eui: 适用 于 更 新 UI 的 回调 频率 ， 在 60ms/ 座 左右 。 

es normal: 普通 的 回调 频 鞭 ， 在 200ms/ 屎 左右 。 

由 于 不 同 设备 的 机 型 性 能 、 当 前 CPU 与 内 存 的 占用 情况 均 有 所 差异 ， 
实际 回调 函数 的 执行 频率 会 有 一 些 出 入 。 

结束 加 速度 数据 监 

小 程序 使 用 wx.stopAccelerometer(OBJECT) 结 束 监 听 加 速度 数据 ， 其 
wx.startAccelerometer(OBJECT) 中 除 interval 以 外 的 参数 相同 ， 如 表 10-18 有 


DH| 本 


I 


Dj 


表 10-18 wx.stopAccelerometer(OBJECT) 的 参数 


参数 说 明 
success() 接口 调用 成 功 的 回调 函数 


I 


fail() 否 接口 调用 失败 的 回调 函数 
completeO) 合 接口 调用 结束 的 回调 图 数 《〈 调 用 所 


监听 加 速度 数据 


一 ] 已 


户 la 请 


名 = 一] 人民 DT 请 


<view class='status'>X 轴 |: {{res.x}}</view> 

<view class='status'>Y 和 轴 : {{res.vy}}</view> 

<view Class="Sstatus">z 轴 ， rires.z1lil</view> 
. </vVview> 


WXSS (pages/demo03/acc/acc.wxss) 的 代 但 上 请 段 如 下 : 


-Statustl 
Tont Siler JI0rpas 
margin:20rpx; 


} 


JS (pages/demo03/acc/acc.js) 的 代码 厂 上 段 如 下 : 


Page (tt 
onLoad: function(options) I 
var that=this 
wx.onAccelerometerChange (function (res)t{ 
that.setDatal({res:rest}) 


}) 


"一 一 
Ce 


运行 效果 如 图 10-6 所 示 。 


bs 


TTTT EE 16:41 生生 和 eC hat 过 16:41 

例题 DEMO = 例 晤 DEMO 

第 10 章 设备 API 第 10 章 设备 APIl 
3. 传感器 3. 传感器 

获取 加 速度 信息 获取 加 速度 信息 
X 轴 :0 X 轴 : 0.29147 
Y 轴 :一 1 Y 轴 :一 0.90101 
2Z 轴 :0 Z 轴 :一 0.32129 
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Go104 用 PG 为 


10.4.1 截屏 


小 程序 使 用 wx.onUserCaptureScreen0 监 听 用 户主 动 截屏 事件 , 用户 使 | 
屏 时 触发 此 事件 。 该 接口 从 基础 库 1.4.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 


1]. wxXx.onUserCaptureScreen (function() { 


console.1log(' 用 户 截 屏 了 ') 


[5 


3. 二) 


10.4.2 ” 扫 码 


小 程序 使 用 wx.scanCode(OBJECT) 调 出 客户 问 扫 人 码 界 面 ， 扫 码 成 功 后 ; 
其 OBJECT 参数 如 表 10-19 所 示 。 


表 10-19 wx.scanCode(OBJECT) 的 参数 


参数 说 明 


HAEDO Et 1 a 

扫 码 类 型 (最 低 版 本 为 1.7.0) ， 
scanlype ATTay 否 'qrCode' (二 维 码 ) 、'barCode' (条 

(DataMatrix) ~、'pdf417' (pdf417) 


success() 接口 调用 成 功 的 回调 函数 


failO 接口 调用 失败 的 回调 函数 
completeO) 接口 调用 结束 的 回调 函数 (调用 成 


其 中 successO 〇 参数 值 的 说 明 如 下 。 
e result: 上 所 扫 码 的 内 容 。 
e scanType: 所 扫 但 的 基 型 。 
e。 charSet: 所 扫 码 的 字符 集 。 
回 时 交加 e path: 当 所 扫 码 为 当前 小 程序 的 合法 二 维 码 时 会 闪 


WXSS (pages/demo04/scanCode/scanCode.wxss) 的 代码 片段 如 下 : 


于 .Statust 

2 text—align: left; 
maAargin: lorpxs 

一 


} 


JS (pages/demo04/scanCode/scanCode.js) 的 代码 片段 如 下 : 


.Page (1{ 

过 scanCode: functiont(t) 1 

3 var that=this 

4 WX.ScanCodell 

二 success:function(res)i 

6c that.setData({res:resl}) 
1 
9 
1 


i 中 国电 信 从 下 午 5:10 Es i 中 国电 信 室 


< 例题 DEMO ” 二 维 码 /条 码 相 有 . 
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扫 码 


字符 集 : 字符 集 : UTF-8 


扫 码 类 型 : Ce 扫 码 类 型 : QR _ 
扫 码 结果 : 及 小 扫 码 结果 : 

http:/ /weixin.ac 

龟 微 信 小 程序 开发 零 基 础 六 门 到 EPLJDratf926s 

加 微 信 小 * 


(ay 页 面 初 始 狂 果 (hy 单 十 榕 钥 讲 入 要 码 界 面 (ce 
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10.4.3 ” 草 贴 板 


设置 剪贴 板 内 容 
小 程序 使 用 wx.setClipboardData(OBJECT) 设 置 系统 甬 贴 板 的 内 容 , 该 接 
开始 支持 ， 低 版 本 需 做 草 容 处 理 。 其 OBJECT 参数 说 明 如 表 10-20 所 示 。 


10-20 wx. ee ECT) 的 参数 
参数 说 明 
data 一 南 要 设置 的 内 容 
success() ”Function | 否 接口 调用 成 功 的 回调 函数 
fail( ”Function | 否 | 接口 调用 失败 的 回调 函数 
completeO ”Function | 否 接口 调用 结束 的 回调 函数 (调用 成 ] 


获取 勇 贴 板 内 容 
小 程序 使 用 wx.getClipboardData(OBJECT) 获 取 系 统 副 贴 板 内 容 ， 访 接 
开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-21 所 示 。 


10-21 wx.getClipboardData(OBJECT) 的 参数 


参数 -人 说 了 明 


EE 接口 调用 成 功 的 回调 函数 , 返回 String 头 
success() unction 贴 板 的 内 容 


failO Function 接口 调用 失败 的 回调 函数 


complete0 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 


【 例 10-8】 设备 API 之 剪贴 板 的 简单 应 用 
WXML (pages/demo04/clipboard/clipboard.wxml) 的 人 


芯 | 若 


I 


<Vview class='title'>4. 用 性 行为 </Views> 
<VIiIew Class='demo—box'> 
<View Class='title'> 李 贴 板 </view> 
有 <view Class='title'>{{code}}</view> 
<button type="pPrimary™ bindtap="setclipboard"> 所 击 此 处 复制 上 和 面 
6. <button bindtap="gqetClipboard"> 煞 取 前 贴 板 内 容 </button> 
171. </view> 


Lu ho 请 


视频 讲解 


JS (pages/demo04/clipboard/clipboard.js) 的 代码 片段 如 下 : 


1 
下 这 
18. 
I 
0. 
< I 


人 


3 


wh 
es 


s 
过 
小 
eh 
过 
本 
5 


Yh 
Es | 


各 生生 Chat 全 


3 Ft FF 


} ， 

/7 获取 剪贴 板 内 容 
getClipboard: function'() 
wxX.getClipboardData l(t! 
SUCCeSS: function(res) 

WwX. ShowIoast (1 


title: 前 贴 板 内 容 是 : 
icon: ‘none”" 
a 
}) 
-}) 
运行 效果 如 图 10-8 所 示 。 


16:01 


100% 


©® 
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剪贴 板 
LsZwS5W2a0N] 


获取 剪贴 板 内容 
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(a) 页 和 面 初始 效果 


图 10-8 


【代码 说 明 】 
本 示例 和 二 clipboard.wxml 中 


{ 


[CITIThL 


{ 


' 十 res.data, 


hat 坊 16:03 
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剪贴 板 
LsZw5W2a0N] 


(b) 复制 内 容 到 剪贴 板 


| 


二 


= 由 = 本人 


] MNS [rw | 
@®) 
第 10 嫩 
44. 月 
El 
LsAww 


(c) 获取 前 


勇 巾 板 的 简单 应 用 


个 <view> 组 件 用 于 显示 串 序 列 : 


re mw i ss FF 
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表 10-22 wx.makePhoneCall(OBJECT) 的 参数 
参数 说 明 
phoneNumber String 是 | 再 要 拨打 的 电话 号 码 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 | 


wx.makePhoneCall(OBJECT) 的 示例 代码 如 下 : 


a i 


世 


I 


WX.makePhoneCalll(l 
phoneNumber: '13800001234" // 仅 为 示例 ， 可 替换 为 真实 的 电话 号 公 
}) 


手机 联系 人 

小 程序 使 用 wx.addPhoneContact(OBJECT) 深 加 手机 联系 人 ， 谤 接口 从 
支持 ， 低 版 本 需 做 兼容 处 理 。 在 调用 后 ， 用 户 可 以 选择 将 该 数据 以 “新 增 1 
到 己 有 联系 人 ”的 方式 写 入 手机 通讯 孙 ， 完 成 手机 通讯 未 联系 人 和 联系 方 : 

OBJECT 参数 说 明 如 表 10-23 所 示 。 


表 10-23 wx.addPhoneContact(OBJECT) 的 参数 
参 数 类 型 必 填 说 上 


photoFilePath String 否 头像 的 本 地 文件 路 径 
nickName 昵称 

lastName 姓氏 
middleName 中 间 名 

firstName 名 字 

remark 备注 
imobilePhoneNumber 手机 号 
weChatNumber 微 信 号 
addressCountry 联系 地 址 国家 
addressState 联系 地 址 省 份 
addressClty 联系 地 址 城市 
addressStreet 联系 地 址 街道 
addressPostalCode 联系 地 址 邮政 编码 
organization 公司 


参 数 类 型 必 填 说 上 
homeFaxNumber 住宅 传 和 其 
homePhoneNumber 住宅 电话 
homeAddressCountry 住宅 地 址 国家 
homeAddressState 住宅 地 址 省 份 
homeAddressClty 住宅 地 址 城市 
homeAddressStreet 住宅 地 址 街道 
homeAddressPostalCode 住宅 地 址 邮政 编码 

示 添 加 成 功 
接口 调用 失败 的 回调 函数 
fail() Function 合 cancel 表示 用 户 取消 ; 返回 
表示 调用 失败 ，detail 为 六 
而 接口 调用 结束 的 回调 函 妆 
complete() Function 口 执行 ) 


【 例 10-9】 位 置 API 之 通信 管理 的 综合 应 用 
WXML (pages/demo04/contact/contact .wxml) 的 代码 上 


lL. yiew clase= "LiClIe SA Hh /> 
2. <VLew Class="'demo-box'> 
频 3 <view class='title'> 退 信 </vView> 
铅 频 讲解 4. <lnput bindblur="'nameBlur" placeholder=" 请 输 . 


<1nput bjindblur="phoneBlur' placeholder=' 博 前 入 联系 人 电话 ' / 
<button type="primary” bindtap-"makeCall"> 拨 打 电话 </button: 
<button bindtap="addPerson"> 添 加 联系 人 </button> 

. </vVview> 


co = TT nN 


WXSS (pages/demo04/contactcontact,wxss) 的 代码 片段 如 下 : 


1-. InpPut buttont 


A margin: lorpx; 
es 
JS (pages/demo04/contact/contactjs) 的 代码 片段 如 下 : 
1. BagGer tt 
2. name: " "， // 联 系 人 姓名 


本 75” 微 信 小 程序 开发 零 基础 入 门 志 y 


19. // 添 加 联系 人 


?2720. addPerson: function() 1 


A let name=this.name 

ea let phone=this.phone 

-et i (name==" " || phone==" ") 1 
?4. WX .ShowTIToast ({ 

title: "姓名 和 电话 不 能 为 空 ! '， 
性 机- TICon: “mone 

21. }) 

8. } else I 

29. wxX.addPhoneContact (1{ 

0. firstName: name., 

号 人 网 mobilePhoneNumber: phone 
322。 }) 

和 } 

34. |} 

32.1) 


真 机 测试 运行 效果 如 图 10-9 所 示 。 
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通讯 


请 辆 六 联系 人 姓名 


上 -时 一 一 
青 辆 上 联系 六 电话 


拨打 电话 


添加 联系 人 


鸟 微 信和 小 程序 开发 要 基础 六 门 


(a) 页 面 初始 效果 (b) 单 击 “ 拨 打 电 话 ” 按 钮 (c) 真实 通话 
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包 讯 


Mn : 


【代码 说 明 】 
本 示例 在 contactwxml 中 包含 了 两 个 <input> 输 入 框 分 别 用 于 输入 联系 
应 的 失去 焦点 事件 目 定 义 图 数 是 nameBlur0 和 phoneBlur0， 一 旦 输入 完毕 


contact.js 页 面 概 量 name 和 phone 中 。 在 输入 框 的 下 方 是 两 个 <button> 组 件 : 
球 加 联系 人 ， 对 应 的 目 定 义 图 数 分 别 定 makeCall0 和 addPerson()。 

在 图 10-9 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 尚未 填写 数据 ; 图 (b) - 
“拨打 电话 ”按钮 的 效果 ， 此 时 手机 会 提示 呼叫 号 码 ; 图 (c) 为 真实 通话 5 
寺 信 息 束 添 加 联系 人 时 的 针 误 提示 ; 图 (e) 为 填 与 信息 后 弹出 的 操作 沫 单 
加 新 联系 人 或 更 新 已 有 联系 人 ; 图 (f) 为 成 功 跳 转 到 手机 系统 自 带 的 新 建 


O010.5 手机 状态 


10.5.1 内存 


小 程序 使 用 wx.onMemoryWarning(CALLBACKI) 监 听 内 存 不 足 的 告 
Android 下 有 告警 等 级 划分 ， 只 有 LOW 和 CRITICAL 会 回调 开发 者 ; 10S 
示例 代码 如 下 : 
1. wx.onMemoryWarning (function()} { 


2 console.1og('" 收 到 内 存 不 足 警 告 ') 
3 


注意 : 只 有 Android 具有 CALLBACK 回调 参数 level， 该 参数 是 Nu 
对 应 系统 内 存 告警 等 级 的 宏 定 义 。Android 下 告警 等 级 对 应 系统 的 宏 如 下 : 
TRIM MEMORY RUNNING MODERATE=5 


TRIM MEMORY RUNNING LOW=10 
TRIM MEMORY RUNNING CRIIICAL 王 > 


10.S.2” 房 须 党 度 


名 国 设 辕 屏 莫 襄 褒 
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支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-25 所 示 。 


表 10-25 wx.getScreenBrightness(OBJECT) 的 参数 


参数 说 明 


型 ， 表 示 屏 幕 亮 度 值 ， 范 围 为 0 一 1，- 
fail0 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 功 - 


保持 常 亮 状态 
小 程序 使 用 wx.setKeepScreenOn(OBJECT) 设 置 是 人 耕 保 持 弟 之 状态 , 该 ; 


序 生效 ， 离 开 小 程序 后 设置 失效 。 该 接口 从 基础 库 1.4.0 开始 支持 ， 低 版 本 


其 OBJECT 参数 说 明 如 表 10-26 所 示 。 


表 10-26 wx.setKeepScreenOn(OBJECT) 的 参数 


参数 说 明 
keepScreenOn 古人 宪 保持 屏 秦 弟 腕 


二 接口 调用 成 功 的 回调 函数 ,返回 值 en 
success() Function 电 表示 调用 结果 


Rail0 接口 调用 失败 的 回调 函数 
completeO) 接口 调用 绪 束 的 回调 函数 〈 调 用 成 也 


a 


Ep 【 例 10-10】 设备 API 之 屏幕 觉 度 管理 的 简单 应 用 
rs WXML (pages/demo0S/brightness/brightness.wxml) 的 
"Er , 1. <view class='title'>5. 玫 机 状态 </view> 


<Vliew Class='demo—box'> 


视频 讲解 RE <VIeW Class="'title'>(]) 设置 屏幕 腕 度 </view> 


4. <Sslider min="0" max=’1" value='0.9" step="0.1" show—value 
'sliderChange" /> 

5 。 </view> 

6. <view Class="'demo—box'> 

<view class='title'>(2) 查 区 屏幕 吉 度 </view> 

8 - <button 七 YPe= - PIImary bindtap="'getBrightness' > 查 区 亮度 < /bi 

re <View Class='title'>»> 当 前 完 度 : { {brightness}}</view> 


10.</view> 


11.<view Class='demo—box'> 


本 }) 
10. |, 
11. //2. 查 询 屏 幕 亮度 


l2. getBrightness: function(} { 


1 Var that=this 

14. WwX.getScreenBrightnessl(t{ 

| Success: function(res) ({ 

16. that.setDatat({ brightness: res.value.toFixed{(1)} 1}) 
A } 

18. }) 

13. }, 


20. //3. 监 昕 switch 变化 

21. switchChange: Tunction(e}) 1 

2 let isKeeping=e.detail.value //true 为 开局 状态 
Re ift (jsKeeping) { 

es wxX.SetKeepSscreenonl(l! 

KeepScCrTeenorn’: trUue 

26. }) 

a } 

2 

二 


运行 效 未 如 图 10-10 所 示 。 


第 10 章 设备 API 


5. 手机 状态 5. 
(0D 设置 屏幕 亮度 (1)¥ 
0.4 
(2) 查 询 屏 幕 亮度 


查询 亮度 


(3) 保 持 屏 幕 常 亮 (3)6 
“保持 第 驶 
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数 是 switchChange0。 
在 图 10-10 中 ， 图 (a) 为 设置 屏 划 亮度 为 0.1 时 的 效果 ， 此 时 画面 会 
医 取 当前 屏 血 膨 撒 的 效果 ; 图 (c) 为 切换 到 党 腕 状态 。 


10.5.3 ”振动 


小 程序 使 用 wx.vibrateLong(OBJECT) 和 wx.vibrateShort(OBJECT) 分 别 |]; 
长 时 间 (400ms) 和 较 短 时 间 (15ms) 的 振动 ， 接 口 均 从 基础 库 1.2.0 开始 
菩 容 处 理 。 它 们 的 OBJECT 参数 说 明 如 表 10-27 所 示 。 


表 10-27 OBJECT 参数 


参数 说 明 
success() i 接口 调用 成 功 的 回调 函数 

fail0 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 


【 例 10-11】 设备 API 之 振动 的 简单 应 用 
WXML (pages/demo0S/vibrate/vibrate.wxml) 的 代码 乒 


1. <view class='title'>5. 于 机 状态 </view> 


过 <View Class='demo—box'> 


视频 讲解 Ee <View Class='title'>(1) 长 时 间 据 动 (400ms) </vi 
4. <button type='primary'" bindtap='vibrateLong'> 开 始 振 动 </buti 
5. </view> 
6. <view Class='demo—box'> 
7- <view class="'title'>({2) 类 时 间 据 动 (15ms)</view> 
2 <button type='primary'" bindtap='vibratesShort'> 开 始 振 动 </bui 
9. </view> 


JS (Pages/demo0S/vibrate/vibrate.js) 的 代码 片段 如 下 : 


第 1 


Page ({ 


/ /长 时 间 振 动 (1) 长 时 


vibrateLong:function()l | 


wx.vibrateLongl() 
人 2) 短 时 


}, 
// 短 时 间 振 动 上 


vibrateshort: function() 1 


-i 


me 


界面 API 


本 章 主要 介绍 小 程序 界面 API 的 相关 知识 ， 包 括 交 互 反 馈 、 导 航 条 设 
页 面 导 航 、 动 画 、 页 面 位 置 、 绘 图 和 下 拉 刷 新 8 个 部 分 。 
本 章 学 习 目标 

。 掌握 消息 提示 框 、 加 载 提 示 框 、 模 态 弹 窗 和 操作 菜单 的 用 法 : 

。 学 握 导航 条 的 标题 、 动 画 和 顾 色 设置 ; 

。 掌握 tabBar 的 标记 、 红 上 点、 监听、 样式 、 显 示 与 隐藏 设置 ; 

。 掌握 页 面 导航 的 5 种 切换 方法 ; 

。 掌握 动画 的 声明 、 描 述 和 导出 步骤 ; 

。 掌握 页 面 位 置 的 返回 功能 : 

。 掌握 在 画布 中 绘制 图 像 、 设 置 样式 、 变 形 、 剪 裁 以 及 图 片 导 出 等 : 

。 掌握 下 拉 刷 新 的 启动 、 监 听 和 停止 方法 。 


11.1.1 ” 消 恩 提示 框 


显示 消息 提示 杠 
小 程序 使 用 wx.showToast(OBJECT) 显 示 消 息 握 示 框 ，OBJECT 参数 说 


表 11-1 wx.showToast (OBJECT) 的 参数 


2 微 信 小 程序 开发 零 基础 入 门 


。 loading: 显示 加 载 图 标 ， 此 时 title 文本 最 多 显示 7 个 汉字 长 度 。 
e hone: 不 显示 图 标 ， 此 时 title 区 本 最 多 可 显示 两 行 〈 最 低 版 本 为 1. 
wx.showToast(OBJECT) 示 例 代 人 如 下 : 


. WX.ShowToast l(t 
title: ' 成 功 " 上 
1Con: SUCCESS  ， 
duration: 2000 

}) 


nS 


上 述 代 人 码 表 示 显 示 市 有 “成功 ” 字 梓 和 对 钧 ( Y ) 图 标的 消 明 提示 框 
关闭 消 因 提示 框 
Pr a] 虽然 独 上 县 提示 框 可 以 在 指定 时 间 后 目 动 猎 失 ， 但 是 
wx.hideIoastO 提 前 关闭 消息 提示 框 。 
【 例 11-1】 表面 API 之 消息 提示 框 的 简单 应 用 
WXML (pages/demo01/toast/toast.wxml)〉 文件 代 体 如 


视频 讲解 


1. <view class='title'>1l. 区 互 反 局- 消息 提示 框 的 简单 应 上 
2. <View Class='demo—box'> 
号 过 <Vview Class='title'>(1) 显示 消 居 提示 框 </view> 
4. EEDn Eroe= "otinaryv” Bindtlap "ShowToadst" > TodSt</Bue 
5 。 </view> 
6. <view Class='demo—box'> 
ye <view class='title'>(2) 不 团 消 奶 提示 杠 </view> 
8 . <button type="primary" bindtap-"hideToast"> 尖 闭 Toast</but 
9. </view> 


JS (pages/demo01/toast/toast.Jjs 〉 艾 件 代码 如 下 : 


Page (1 
showToast: function() 1 
WwWwX.ShowIoastl(t 
title: "Hello World! ，， 
duration: 1000 


人 


}) 
}, 
hideToast: function() 1 
x wxXx.hideToast!() 


ha :站 1 
例题 DEMO . 
第 11 章 界面 API 第 11 章 界面 API 

1. 变 互 反馈 -消息 提示 框 的 简单 应 用 1. 到 互 反馈 -消息 提示 框 的 简单 应 用 
(1) 显示 消息 提示 框 (1) 显示 消息 提示 框 
SanH ME (2) 关闭 消息 提示 框 

Ea Hello VWorld 1 灶 书 微 信 小 程序 开发 零 基础 入 门 
(a) 显示 消息 提示 框 (b) 关闭 消息 提示 框 


图 11-1 ”消息 提示 框 的 简单 应 用 


11.1.2 ”加 载 提 示 框 


显示 加 载 提 示 框 
小 程 厅 使 用 wx.showLoading(OBJECT) 显 示 加 载 提 示 框 , 访 接 口 从 基础 | 
低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-2 所 示 。 


表 11-2 ”wx.showLoading(OBJECT) 的 参数 


参数 | 关 型 [| 必 3 说 


Re 证 示 的 内 容 

mask 是 否 显示 透明 遮 畦 层 ， 防 止 触摸 穿 透 ， 
success() 接口 调用 成 功 的 回调 函数 

fail() 否 接口 调用 失败 的 回调 函数 

complete( 否 接口 调用 结束 的 回调 函数 〔( 调 用 成 功 - 


注意 : 这 种 提示 框 不 会 自动 消失 ， 需 主动 调用 wx.hideLoadine() 才 能 ;- 


于 了 汪 ” 微 信 小 程序 开发 零 基 础 入 门 


1 。 setTimeout (function()t 
wx.hideLoading l() 
二。 1 220 


上 述 代码 表示 在 两 秒 内 关闭 提示 框 。 
【 例 11-2】 表面 API 之 加 载 提示 框 的 简单 应 用 
WXML (pages/demo01/loading/loading.wxml) 文件 代 1 


视频 讲解 1. <view class='title'>1 .交互 反馈 -加 载 提示 框 的 简单 应 | 


人 <View Class='demo—box'> 


和 <Vliew CasSss= 七 1I 七 人 > (1 ) 显示 加 载 提 示 杠 </view> 

4. <DUtton tvee="pPrimary™ bindtap=— "showLoading"> 下 不 LOAaAdindg<. 
5. </view> 

6. <view Class='demo—box'> 

<view class='title'>(2) 关闭 加 载 提 示 杠 </view> 

8. <button type="primary™ bindtap="hideLoading"> 头 团 Loading<. 
9. </view> 


JS (pages/demo01/loading/loading.js〉 文件 代码 如 下 : 


Page ({ 
showLoading: function() (| 
wx.ShowLoadingl(tl 
title: 'Hello World! "' 


}) 

上 7 

hideLoading: function() { 
wx.hideLoading {() 

} 


运行 效果 如 图 11-2 所 示 。 


香雪 Chat 二 21:15 各 可 重重 要 名 局 t 过 21:15 
例题 DEMO 例题 DEMO 
第 11 章 界面 API 第 11 章 界面 API 
1. 交互 反馈 -加 载 提 示 框 的 简单 应 用 1. 变 吾 友 馈 -加 载 提 未 框 的 简单 应 用 
(1) 显示 加 载 提示 框 (1) 显示 加 载 提示 框 


(2) 人 rol 下 (2) 关闭 加 载 提示 框 


© E 


【代码 说 明 】 

本 示例 在 loading.wxml 中 包含 了 两 个 <button=> 按 钮 分 别 用 于 显示 和 关 | 
应 的 目 定 义 国 数 分 别 是 showLoadingO0 和 hideLoadingO。 在 loading.js 中 定 》 
法 用 于 显示 一 个 市 有 加 载 动画 效果 的 提示 框 ， 其 文字 内 容 是 “Hello World 
方法 用 于 立刻 隐藏 提示 框 。 

在 图 11-2 中 ， 图 (a) 为 单 击 “显示 Loading” 按 钮 后 的 效果 ， 此 时 提 ; 
目 动 消失 ; 图 (b) 是 单 击 “ 关 财 Loading” 按 钮 后 的 效果 ， 此 时 提示 框 将 


11.1.3 ” 模 态 弹 窗 
小 程序 使 用 wx.showModal(OBJECT) 显 示 模 态 弹 窗 , 其 OBJECT 参数 说 


表 11-3 wx.showModal(OBJECT) 的 参数 
BB 一 
title stng “| 是 | 提示 的 标题 
content sting “| 是 | 提示 的 内 容 
showCancel 是 否 显示 取消 按钮 ， 默 认为 true 
cancelText 取消 按 锂 的 文字 ， 默 认为 "取消 "，， 
cancelColor 取消 按钮 的 文字 颜色， 默认 为 "#00 


DDI| 和 


Dy 


confirmText 确定 按钮 的 文字 ， 默 认为 "确定 "，， 
confirmColor 盏 确定 按钮 的 文学 颜色， 默认 为 "#3c 
success() 接口 调用 成 功 的 回调 函数 
failO 否 接口 调用 失败 的 回调 函数 


| 


complete0 接口 调用 结束 的 回调 函数 调用 成 
其 中 success() 返 回 参 数 的 说 明 如 表 11-4 所 示 。 


表 11-4 success() 返 回 参 数 


多 数 | 类 型- 说 “本 


confirm 当 为 true 时 表示 用 户 单 击 了 “确定 ”按钮 
网 i 当 为 true 时 表示 用 户 单 击 了 “取消 ”按钮 (用 于 Androi 
区 分 单 击 遮 章 层 关闭 还 是 单 击 “ 取 消 ” 按 钮 天 闭 ) 


【 例 11-3】 界面 API 之 模 态 弹 窗 的 简单 应 用 
WXML (pages/demo01/modal/modal.wxml) 文件 代码 如 下 : 


0 


也 3] 微 信 小 程序 开发 零 基础 入 门 


| WwWX .ShowMoada1lL (1{ 

4 title: ' 提 示 '， 

5 content: ' 这 是 一 个 模 态 弹 窗 (有 “取消 ”按钮 )"， 
6 。 Success: function(res) I 

_ 1 (res.confirm) 1 

8 console .1og ("'"“ 人 确定” 按钮 被 单 击 ') 

9 


| else if (res.cancel) I 


10. console.1log(' “取消 ”按钮 被 单 击 ') 
区 时 } 

se } 

1 }) 

于 二 二 


15. showModal2: function() 1 
16. wiX.ShowModal l(t 


3 title: ' 提 未 "， 

18. content: ' 这 是 一 个 模 态 弹 窗 (无 “取消 ”按钮 》'， 
LE 站 showCancel:false 

20 - }) 

Ls} 

2 .1}) 


运行 效 末 如 图 11-3 所 示 。 
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例 晤 DEMG “we 【es) 例 晤 DEMG 


第 11 章 界面 API 
1. 交互 反馈 - 模 态 弹 窗 的 简单 应 用 


(1) 有 【取消 】 技 钮 的 模 态 弹 窗 。 


2) 无 【取消 】 按 钮 的 模 志 弹 窗 


re i = 
Te "We 

ad 
ey ew LN > NA 


已 微 信 小 程序 开发 零 基础 入 门 


【代码 说 明 】 

本 示例 在 modal.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 有 无 1 
窗 ,对 应 的 目 定 义 图 数 分 别 是 showModal10 和 showMeodal20。 在 modal.js 中 
方法 用 于 显示 一 个 币 有 取消 和 确定 按钮 的 模 态 弹 窗 ; showModal20 方 法 用 - 
按钮 的 模 态 弹 窗 。 

在 图 11-3 中 ， (a) 为 页 面 初 始 效 果 ; 图 (b) 为 里 击 第 一 个 按钮 扯 
是 单 击 第 二 个 按钮 后 的 效果 ; 图 (d) 为 分 别 单 击 取消 和 确定 按钮 后 Conso] 
容 ， 由 该 图 可 见 模 态 弹 窗 的 按钮 蛙 击 可 以 被 监听 到 。 


11.1.4 操作 举 单 
小 程序 使 用 wx.showActionSheet(OBJECT) 显 示 从 底部 浮 出 的 操作 菜单 
说 明 如 表 11-5 所 示 。 


表 11-5 wx.showActionSheet(OBJECT) 的 参数 


参数 说 明 
itemList | StringAmay | 是 | 按钮 选项 的 文字 数组 ， 数 组 长 度 
es 掖 钥 选项 的 文字 颜色 ， 默 认为" 


Dj| A 


success( 否 接口 调用 成 功 的 回调 函数 ， 详 见 
failO 接口 调用 失败 的 回调 函数 
complete() 盏 接口 调用 结束 的 回调 函数 (调用 


其 中 success0 返 回 参 数 的 说明 如 表 11-6 所 示 。 


表 11-6 success() 返 回 参 数 


参数 | 类 型 _ 说 明 


i 用 户 单 击 的 按钮 从 上 到 下 的 顺序 ， 用 


【 例 11-4】 界面 API 之 操作 菜单 的 简单 应 用 
WXML (pages/demo01/actionsheet/actionsheet.wxml) - 


! 1. <view class='title'>l1 .交互 反馈 -操作 呈 单 的 简单 应 用 < 
2. <View Class='demo—box'> 

视频 讲解 3. <View class="'title'> 显 不 操作 有 训 单 </view> 

4. <buttontype="primary"bindtap="showActionsheet"> 且 未 Action 
5. </view> 


元 ] 站 微 信 小 程序 开发 零 基 础 入 门 


运行 效果 如 图 11-4 所 示 。 
重 委 重重 二 NEChat 二 21:35 


例题 DEMO 


第 11 章 界面 API 
1. 交互 反馈 -操作 某 单 的 简单 应 用 


显示 操作 某 单 


心 微 信 小 程序 开发 零 基础 入 门 


Menuol 
Menu02 
Menu03 

取消 
(a) 页 面 初始 效 果 (b) 单 击 弹 出 操作 沫 单 


Console Sources “ Network Security Audits Storage 


top 了 Filter 


(c) 选择 Menu01 选项 后 Console 控制 台 的 输出 内 容 


[K Console Sources Network Security Audits Storage 


QQ | top Filter 


P| 


{OD : 


数 的 ; 图 (d) 为 早 击 取消 按钮 后 Console 控制 台 输 出 的 内 容 ， 用 户 也 可 以 
触发 该 内 容 。 


11.2.1 当前 页 面 标题 议 置 


小 程序 使 用 wx.setNavigationBarTitle(OBJECT) 动 态 设 置 当 前 页 面 的 标 ) 


数 说 明 如 表 11-7 所 示 。 


表 11-7 wx.setNavigationBarTitle(OBJECT) 的 参数 


参数 说 上 明 


title0 页 面 标题 
success() 省 接口 调用 成 功 的 回调 函数 


4 


Rail0 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 ) 


.| 


I 


wx.setNavigationBarTitle(OBJECT) 示 例 代 人 码 如 下 : 


1. wx.SetNavigationBarTitlelt 
2- title: ' 当 前 页 面 " 
3 13 
其 中 title 的 什 可 以 由 开 友 者 目 定 义 。 
【 例 11-S】 表面 API 之 设置 导航 条 标题 的 简单 应 用 
WXML (pages/demo02/ttle/title.wxzml) 文件 代码 如 下 : 
1. <view class='title'>2 .导航 条 设置 -标题 的 简单 应 用 </view> 
2. <View Class='demo—box'> 
3 <view class='title'>» 设 置 导 航 条 标题 </view> 
4. <input type='text' placeholder='5 请 输入 目 定 义 的 导航 条 标题 ' bin 
"titlelInput'></ input> 
5 <button type="primary™ bindtap="setTitle"> 设 证 标 砚 </button: 
6. </view> 


JS (pages/demo02/title/title.js〉 文件 代码 如 下 : 


元 让。 微 信 小 程序 开发 零 基础 入 门 


运行 效果 如 图 11-5 所 示 。 
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例题 DEMO “ee。 区 是 一 个 新 标 是 


第 11 章 界面 API 第 11 章 界面 API 
2. 导航 条 设置 -标题 的 简单 应 用 2. 导航 条 设置 -标题 的 简单 


设置 导航 条 标题 设置 导航 条 标题 
请 输入 自 定义 的 导航 条 标题 | 这 是 一 个 新 标题 


名 微 信 小 程序 开 友 零 基 础 入 | ] 名 微 信 小 程序 开发 零 基础 入 | 


(a) 页 面 初始 效果 (b) 单 击 设置 导航 条 标 是 
图 11-5 ”设置 导航 条 标题 的 简单 应 用 


【代码 说 明 】 
本 示例 在 title.wxml 中 包含 了 一 个 <input> 输 入 框 用 于 录入 自 定义 标题 ， 
数 是 titleInput0， 以 及 一 个 <button> 按 钮 用 于 更 新 当前 页 面 的 导航 条 标题 ，; 
是 setTitle0。 在 titlejs 中 定义 teInputO 方 法 用 于 实时 更 新 输入 框 中 的 内 容 
方法 获取 标题 内 容 并 显示 出 来 。 
在 图 11-5 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 输入 新 标题 后 单 击 
的 效果 ， 由 该 图 可 见 此 时 顶端 标题 更 新 为 输入 框 中 的 文本 内 容 。 


大 一 一 一 和 bb 和 Br si EL 0 和 J 


Co 


中 


O% 


<view class='title'>(?2) 天 团 导 航 条 加 载 动 田 </view> 
<button type="primary™ bindqtap="hideLoading"> 关 闭 加 载 动 团 < 


. </view> 


JS (pages/demo02/loading/loading.js) 文件 代码 如 下 : 


Page (tl 
showLoading: functiont() I 
wx.ShowNavigationBarLoading'() 
上 ， 
hideLoading: function() 1{ 
wx.hideNavigationBarLoadindg'() 
} 
}) 


运行 效果 如 图 11-6 所 示 。 


eo0n eChat 过 37:05 本 二 二 和 VeChat 全 22:06 
:例题 DEMO 使 DEMO 
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, 导航 条 设置 -加 载 动画 的 简单 应 用 2, 导航 条 设置 -加 载 动画 的 简单 应 | 

(1) 显示 导航 条 加 载 动画 (1) 显示 导航 条 加 载 动 画 

(2) 关闭 导航 条 加 载 动画 (2) 关闭 导航 条 加 载 动画 

巴 微 信 小 程序 开发 零 基 础 入 门 器 微 信 小 程序 开发 夫 基 础 入 门 

(a) 显示 导航 条 加 载 动画 (b) 关闭 导航 条 加 载 动画 


氏 11-6 导 盘 条 加 盐 动 ) 国 | 的 简 电 应 用 


区 7 微 信 小 程序 开发 零 基础 入 门 


开始 文 持 ， 低 版 本 需 做 基 容 处 理 。 其 OBJECT 参数 说 明 如 表 11-8 所 示 。 


表 11-8 wx.setNavigationBarColor(OBJECT) 的 参数 


参数 说 阴 
县 入 前 景 颜 色 值 ， 包 括 按钮 、 标 题 、 
frontColor 是 持 #ffffff 和 #000000 (不 支持 颜色 ! 
形式 ) 
backeroundColor 9 隶 闫 色 值 ， 有 效 值 为 十 六 进 制 训 
animation 合 动画 效果 
animation.duration 动画 变化 时 则 ， 默 认 值 为 0， 单 位 
animation.timingFunc 合 动画 变化 方式 ， 默 认 值 为 linear 


ID 


Functio 接口 调用 成 功 的 回调 函数 ， 返 [ 
success() unction ee 


fail0 接口 调用 失败 的 回调 函数 


4 


白 
completeO 合 接口 调用 结束 的 回调 函数 〈 调 用 所 


animation.timingFunc 的 有 效 全 如 下 。 

linear: 动画 从 头 到 尾 的 速度 是 相同 的 。 

easeIn: 动画 以 低速 开始 。 

easeOut: 动画 以 低速 结束 。 

easeInOut: 动画 以 低速 开始 和 结束 。 
wx.setNavigationBarColor(OBJECT) 示 例 代 人 如 下 : 


. WX.SetNavigationBarCcolor ({ 
frentcCcolor: "#ffIfffE"s 
backgroundColor: "'#£ff0000", 
animation: I 
duration: 400,， 
timingFunc: "easeln' 


1 

过 
和 
4. 
ee 
ER 
. 
2 


【 例 11-7】 表面 API 之 导航 条 颜色 的 简单 应 用 
WXML (pages/demo02/colorcolor wxml) 文件 代码 如 
1. <view class='title'>2 .导航 条 设置 ~- 闫 色 的 简单 应 用 </ 


< 过 TENW Class='demo—box'> 
<view class='title'> 设 置 导 和 捧 条 毅 色 < /view> 


运行 效果 如 图 11-7 所 示 。 


生硬 重量 VEChat 全 22:17 100%, [ml' | 重 烛 生生 和 NEChat 全 2217 
例题 DEMO “0 (©) 例题 DEMO 
第 11 章 界面 API 第 11 章 界面 API 
2. 导航 条 设置 - 郑 色 的 简单 应 用 2. 导航 条 设置 -颜色 的 简 
设置 导航 条 闫 色 设置 导航 条 颜色 
@@ 微 信和 小 程序 开发 零 基础 入 门 加 微 信 小 程序 开发 零 基 础 . 
(a) 页 面 初始 效果 (b) 单 击 更 新 导航 条 关 


图 11-7 ”导航 条 颜色 的 简单 应 用 


【代码 说 明 】 

本 示例 在 colorwxml 中 包含 了 一 个 <button> 按 钮 用 于 更 新 当前 页 面 的 - 
的 目 定 义 图 数 是 setColorO0。 在 colorjs 中 定义 showColor0 方 法 在 两 秒 的 过 7 
变化 ， 并 且 动 画 以 低速 开始 和 结束 。 

在 图 11-7 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 顶端 导航 条 是 黑 底 白字 机 
击 “ 设 罩 闫 色 ” 按 钮 更 新 导航 条 闫 色 后 的 戏 果 ， 由 该 图 可 见 此 时 导航 条 变 ; 
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表 11-9 wx.setTabBarBadge(OBJECT) 的 人 参数 
CE 砚 机 
ee 0Bar 的 路 一 项 ， 从 左边 算 起 ， 
text sting | 是 显示 的 文本 ， 超 过 3 个 字符 则 时 也 
success() 了 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 《调用 所 


wxX.setTIabBarBadge(OBJECT) 示 例 代 码 如 下 : 


Ij| 大 | 秋 | 血 


- WX.SetTabBarBadoge (1{ 


index: 1, 
| 二 
}) 


上 述 代 码 表示 将 左 起 第 二 项 的 右上 角 追 加 数字 1。 
移 除 tabBar 标记 
小 程序 使 用 wx.removeTabBarBadge(OBJECT) 移 除 tabBar 某 一 项 右上 . 


从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 菩 容 处 理 。 


其 OBJECT 参数 说 明 如 表 11-10 所 示 。 


表 11-10 wx.removeTabBarBadge(OBJECT) 的 参数 


参数 说 明 


index 是 tabBar 的 哪 一 项 ， 从 左边 拭 起 ，/ 
success() 接口 调用 成 功 的 回调 函数 
fail0 否 接口 调用 失败 的 回调 函数 


让 


completeO 接口 调用 结束 的 回调 函数 (调用 | 


wx.removeTabBarBadge(OBJECT) 示 例 代 人 码 如 下 : 


wxX.removeTabBarBadge ({ijndex: 0}) 


上 述 代码 表示 将 左 起 第 一 项 的 石上 角 文本 移 除 。 


11.3.2 ”tabBar 红 点 


显示 tabBar 红 点 


© uk 


隐藏 tabBar 红 点 

小 程序 使 用 wxhideTabBarRedDot(OBJECT) 隐 疙 tabBar 某 一 项 的 右上 .: 
从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 茹 容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-12 所 示 。 


表 11-12 wx.hideTabBarRedDot(OBJECT) 的 参数 


CE 况 “ 本 
index ”Number | 是 tabBar 的 哪 一 项 ， 从 左边 得 起 ， 
success() 接口 调用 成 功 的 回调 函数 


a 庆 


| mm | 
failO 接口 调用 失败 的 回调 函数 
complete() 合 接口 调用 结束 的 回调 函数 (调用 


11.3.3 onTabltemTap() 


在 小 程序 中 , 单 击 tabBar 中 有 的 任 一 tab 时 都 会 俐 及 onTabItemTap(item) 
1.9.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 
onTabItemTap(itemy) 示 例 代 人 码 如 下 : 


1. Page ({ 

起 onTablItemTap (item) 1 

本 console.log (item.index) / /页面 序 号， 表示 第 几 个 tab 
= console.log (item.pagePath) /7/ 页 面 路 径 地 址 

4 console.1log (item.text) /7 页 面 文 本 内 容 

6. } 

Te 


11.3.4 设置 tabBar 样式 


设置 tabBar 整体 样式 

小 程序 使 用 wx.setIabBarStyle(OBJECT) 动 态 设置 tabBar 的 整体 样式 ， 
1.9.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-13 所 示 。 


表 11-13 wx.setTabBarStyle(OBJECT) 的 参数 


开 微 信 小 程序 开发 零 基础 入 门 


人 borderstyle: ‘white' 
6. 1}) 


设置 tabBar 单项 样式 

小 程序 使 用 wx.setTabBarItem(OBJECT) 动 态 设 置 tabBar 某 一 项 的 内 容 
1.9.0 开始 记 持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-14 所 示 。 


表 11-14 wx.setTabBarltem(OBJECT) 的 参数 
参数 说 明 
index tabBar 的 哪 一 项 ， 从 左边 算 起 


text String tab 上 按钮 的 文字 

ne i i 图 所 路 径 ,icon 大 小 限制 为 40KB, 建议 ) 
本 本 当 position 为 top 时 此 参数 无 效 ， 它 不 3 

ee 二 | 选中 时 的 图 片 路 径 ，icon 大 小 限制 为 

Nr a 81 X81px， 当 position 为 top 时 ， 此 参 3 


successO 否 “| 接口 调用 成 功 的 回调 函数 
fail() 接口 调用 失败 的 回调 函数 
completeO) 合 接口 调用 结束 的 回调 函数 (调用 成 功 与 


wx.set TabBarItem(OBJECT) 示 例 代 码 如 下 : 


. WX.SetTabBarlteml(! 

index: 0., 

| 

iconPath: '"'/path/to/iconpPpath', 
selectedIconPath: '/path/to/selectedIconpPath' 


DY 


}) 


11.3.5 显示 与 隐藏 tabBar 


于 示 tabBar 
小 程序 使 用 wx.showTabBar(OBJECT) 显 示 tabBar， 访 接口 从 基础 库 1 
版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-15 所 示 。 


小 :| Erw chaiirTahDariMmyD | 记 产 本 在 站 - 沽 沿 人 


参 


E 


表 11-16 wx.hideTabBar(OBJECT) 的 参数 


数 说 阴 
animation 百 


0 


古 否 需要 动画 效果 ， 上 默认 无 


4 


success() 接口 调用 成 功 的 回调 函数 


failO 


complete0 i 


的 -是 靖 


i 


DY 


天 站 调用 失败 的 司 调 长 


接口 调用 结束 的 回调 函数 (调用 成 功 


0 


【 例 11-8】 界面 API 之 设置 tabBar 的 综合 应 用 
本 示例 将 用 于 展示 本 节 所 学 的 tabBar 的 各 种 设置 方式 ， 包 括 如 下 内 容 


tabBar 的 右上 角 文 本 长 置 ; 
tabBar 的 右上 角 红 点 设置 ; 
tabBar 的 样式 设置 ; 

tabBar 的 显示 与 隐 省 效果 。 


首先 需要 在 app.json 文件 中 声明 tabBar 结构 , 本 示例 选择 显示 两 个 页 四 
例题 页 面 。app.json 文件 代码 如 下 : 


{ 


上 述 代 码 的 效 末 如 图 11-8 所 示 。 


"tabBar™: 1 


"color™.:"#000™, 
"selectedColor™:"#1laadl9™", 
ai hs | 
{ 
"pagePath": "pages/index/index", 
"iconPath": "images/demo03/house.png", 
"selectedIconPath": "images/demo03/house green-png”， 
“xt we 和 砚 
上 7 
{ 


"pagePath": "pages/demo03/tabBar/tabBar", 
"iconPath": "images/demo03/star.png", 
"selectedIconPath": "images/demo03/star green.pn 
"text": "tabBar 例题 " 


| 


6 中 微 信 小 程序 开发 零 基础 入 门 
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16 
4 


18. 
有 
20. 


21] 


[ee 


I 的 下] 人 i 总 


睛 二 
OO， 


上 情 王 
Li 


睛 情 靖 
本 可 


2 
i 


<view class="'title'>(2) 布 上 骨 红 点 设置 </view> 

<button tyvpe "primary size—"mini bindtap= "showRedDot">t 
<button type="primary” SlzZe="mini' pbindtap-"hideRedDot"> 取 消 
.</Vview> 

-<VIeWw Class='demo—box'»> 

<View Class='title'>(3)tabBar 样式 设置 </view> 

<button type="pPrimary” SizZe="'mini' pbindtap-"setBarstyle"> 整 体 
<button type="pPrimary” SizZe= "mini’ bindtap"setColor"> 单 项 设置 
.</view> 

.<View Class="'demo—box'> 

<View class='title'>(4)tabBar 的 显示 与 隐 臣 </view> 

<button type="pPrimary” SizZe~="mini' bindtap="showTabBar"> 电 示 { 
<button type="pPrimary” SizZe~="mini’ binadtap="hideTabBar"> 隐 茂 t 
.</Vview> 


WXSS (pages/demo03/tabBartabBarwxss) 文件 代码 如 下 : 


buttont 
margin: lO0Orpx; 


} 


JS (pages/demo03/tabBartabBarjs) 文件 代码 如 下 : 


Page (1{ 
/1 设置 文本 
setText: function() 1 
wx .SetTabBarBadge (1 
jndex: 1, 
2 
}) 
}, 
/ /取消 文本 
removeText: function() { 
wxXx.removeTabBarBadgqge (1 
index: 1 
}) 
}, 
/ /显示 红 点 
showRedDot: function()} 1 
WX.ShowTITabBarRedDot (1 
index: 1,， 
}) 
上 
1/ 隐 统 红 占 


Lm 


text: 5 首页， E 
iconPath: '/images/demo03/house.png', 
selectedIiconPath: "'/images/demo03/house green.png'’ 
}) 
}, 
/ /还 原 tabBar 样式 


44. resetBarSstyle: functiont{() 1 


wiX.SetTabBarItemlt1 
index: 1,， 
text: "tabBar 例题 '， 
iconPath: '/images/demo03/star.png', 
selectedIconPath: '/images/demo03/star green.png' 
}) 
wxX.SetTabBarSstylel(l 
color: #000000°",， 
selectedColor: "#1laadl9' 
}) 
| ， 
/7 最 示 LEa6Bar 


57。 ShowTabBar: functiont() ff 


wx.ShowTabBar({}) 
}, 
/ /隐藏 tabBar 


6l1. hideTabBar: function() ff 


年 二 2 


ra 


wx.hideTabBar(t{}) 


行 效 果 如 图 11-9 所 示 。 
ssse eChat 全 10:57 重重 eChat 二 10:58 
例题 DEMO 例题 DEMO 
第 11 章 界面 API 第 11 章 界面 API 
3. tabBari 有 置 3. tabBari 有 置 
(1) 右 上 和 角 文 本 设置 (1) 右 上 角 文 本 设置 


(2) 右 上 和 角 红 点 设置 (2) 右 上 角 红 后 设置 


sj 由 微 信 小 程序 开发 零 基础 入 门 


和 WeChat 全 11:10 100% [本 二) eChat 全 11:09 
例题 DEMO “we (®) 例题 DEMO 
第 11 章 界面 API 第 11 章 界面 APl 
3. tabBar 设 置 3. tabBar 设 置 
(1 右上 角 文 本 设置 (1) 右 上 和 角 文本 设置 
(2) 右 上 角 红 点 设置 (2) 右 上 角 红 点 设置 
(3)tabBar 样 式 设 置 (3)tabBar 样 式 设置 


(4)tabBar 的 显示 与 隐藏 


Eo EE 


(4)tabBar 的 显示 与 隐藏 


ee 


品 微 信 小 程序 开发 要 基础 入 门 局 微 信 小 程序 开发 零 基础 入 1 
合 福 会 1 
首页 tabBar 例 是 首页 


(c) 整体 样式 设置 效果 


seeee WEChat 全 10:59 100% [到 “eees Wechat Ss 10:59 
例题 DEMO TO 例题 DEMO 
第 11 章 界面 API 
3. tabBari 设 置 3. tabBari 及 置 


(1D) 右 上 角 文本 设置 (1) 右 上 角 文本 设置 


(2) 右 上 角 红 点 设 置 (2) 右 上 角 红 点 设置 
ET ED ET | 


tr : 


【代码 说 明了】 

本 示例 在 tabBarwxml 中 包含 了 4 组 案例 ， 并 为 每 组 配置 了 两 个 <butto 
应 的 目 定 义 困 数 是 setIextO0 和 removeTextO, 分 别 用 于 显示 和 | 隐 着 tabBar 引 
组 对 应 的 目 定 义 图 数 是 showRedDotO 和 hideRedDotO， 分 别 用 于 显示 和 了 隐 
红 点 ; 第 3 组 对 应 的 目 定 义 阔 数 是 setTIabBarStyle0、setBarItemStyleO 以 及 1 
分 别 用 于 设置 tabBar 的 整体 样式 、 竺 项 样式 以 及 还 原 最 初 样 式 ; 第 4 组 对 
showTabBar0 和 hideTabBar0， 分 别 用 于 旺 示 和 隐 疾 整个 tabBar。 

在 图 11-9 中 ,图 (a) 和 图 (b) 为 添加 右上 角 文 本 和 红 点 效果 ; 图 ( 
体 和 单项 样式 设置 效果 ; 图 (e) 和 图 (f) 为 隐藏 和 显示 整个 tabBar 效果 ， 
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11.4.1 跳 转 到 新 页 面 
小 程序 使 用 wx.navigateTIo(OBJECT) 傈 留 当前 页 面 ， 并 在 当前 页 面 上 : 
的 新 页 面 。 在 这 种 打开 方式 下 可 以 单 击 新 页 面 堪 上 角 的 返回 按钮 或 使 用 wi 
口 返回 到 原 页 面 。 其 OBJECT 参数 说 明 如 表 11-17 所 示 。 
表 11-17 wx.navigateTo(OBJECT) 的 参数 
参数 说 明 


需要 跳 转 的 应 用 内 非 tabBar 的 页 面 的 路 径 ， 显 
url String 参数 与 路 径 之 间 使 用 ?分 隔 , 参数 键 与 参数 值 慰 


间 


及 分 隔 ， 例 如 :， path?key=value&key2=value2& 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 会 


Dy 


Dy 


DY 


wxX.navigateTo(OBJECT) 示 例 代 码 如 下 : 


1 。 wx.navigateToll 
2 Url: "test21d=123" 
35 3} 


37 | 微 信 小 程序 开发 零 基础 入 门 


11.4.2 ”返回 指定 页 面 


|- 


[5 


- }) 


小 程序 使 用 wx.navigateBack(OBJECT) 关 闭 当 前 页 面 ， 返 回 上 一 页 面 马 
其 OBJECT 参数 说 明 如 表 11-18 所 示 。 


表 11-18 wx.navigateBack(OBJECT) 的 参数 


数 说 明 
delta | Number | 1 | 返回 的 页 面 数 ， 如 果 delta 大 于 现 有 页 面 


为 了 更 好 地 理解 该 接口 ， 假 设 有 A、B、C 三 个 页 面 ， 其 中 A 页 面 
当前 是 A 页 面 ， 使 用 wx.navigateTo0 打 开 B ered 


. WX.nNavigateTol(t! 


rile "3 


- }) 


当前 为 也 页面， 再 使 用 wx.navigateIo0 打 开 C 页 面 的 示例 代码 如 下 : 


。 WX.NavigateTol(t! 


本 


- }) 


当前 是 C 页 面 ， 使 用 wx.navigateBackO 返 回 A 页 和 面 的 示例 代码 如 下 : 


. WX.NavigateBackt(l! 


delta: 2 // 如 果 是 1 则 返回 B 页 面 


注意 : 如 果 用 户 不 清楚 页 面 层 数 ， 可 通过 getCurrentPages() 获 取 当 前 1 


11.4.3 ”当前 页 面 重 定向 


小 程序 使 用 wx:redirectIo(OBJECT) 关 闭 当 前 页 面 内 容 ， 重 定 同 到 应 用 
其 OBJECT 参数 说 明 如 表 11-19 所 示 。 


表 11-19 wx.redirectTo(OBJECT) 的 参数 


EE EE ME 在 上 Fr HH 寺 E to Bo 自生 下 下 和 | 身上 避 委 也 


11.4.4 重 局 页 面 


小 程序 使 用 wx.reLaunch(OBJECT) 关 财 所 有 页 面 ， 童 新 打开 到 应 用 内 | 
口 从 基础 库 1.1.0 开始 文 持 ， 低 版 本 需 做 莱 容 处 理 。 
其 OBJECT 参数 说 明 如 表 11-20 所 示 。 


一 11-20 “wx.reLaunch(OBJECT) 的 参数 


参数 说 上 明 


再 要 跳 转 的 应 用 内 页 面 路 径 ， 路 径 后 可 以 市 

et 间 使 用 ?分 陋 ， 参 数 键 与 参数 值 用 = 相连 ， 不 | 

和 path?key=value&key2=value2'， 如 果 跳 转 华 
页 面 则 不 能 市 参数 


success() Function | 否 接口 调用 成 功 的 回调 函数 


failO Function Function | 否 接口 调用 失败 的 回调 函数 
complete( ) Fuction | 否 接口 调用 结束 的 回调 函数 《调用 成 功 与 售 孝 


wx.reLaunch(OBJECT) 示 例 代 码 如 下 : 


节 


| 芯 


1 。 wx.reLauncht(l 
uril: test?Ed=1” 
3 


11.4.5 ”切换 tabBar 页 面 
小 程序 使 用 wx.switchTab(OBJECT) 跳 转 到 指定 的 tabBar 页 面 ， 并 关闭 
其 OBJECT 参数 说 明 如 表 11-21 所 示 。 
表 11-21 wx.switchTab(OBJECT) 的 参数 
参数 说 明 
wr 南 要 跳 苇 的 tabBar 页 面 的 路 径 〈 需 在 app.json 
“ 的 页 面 ) ， 路 径 后 不 能 带 参数 
success() Function | 否 接口 调用 成 功 的 回调 函数 
failO) Function | 否 | 接口 调用 失败 的 回调 函数 


completeO Fumction | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 所 


wx.switchTab(OBJECT) 示 例 代 码 如 下 : 


DI 并 


I 


60 ” 微 信 小 程序 开发 零 基础 入 门 


5 


A 
10. 
了 


| 


= 
1 4. 
Fs、 


106. 
下 了 
1 
LL 


20. 


< 


e wx.switchTab(): 切换 到 tabBar 贝 而 。 
WXML (pages/demo04mmavigate/mmavigate.wxml) 文件 代码 如 下 : 


<vyiew Class= tenr>4 页 面 村 其 =/Vwiews= 
<Vliew Class='demo—box'> 
<View Class='title'>(1)wx.navigateTo</view> 
<buttontype="primary" size='mini' bpindtap="navigateTo"™> 跳 转 
</view> 
<V1iew Cass= aqemo 一 DOX > 
<view Class='title'>(2)wx.navigateBack</view> 
<button type="primary" size=—'mini" bindtap—"navigateBack"> 赤 
</view> 
<Vview Class="'demo—box'> 
yew Clas Lille > (WE TodirTectTo /vieNS 
<button type="primary” Si2Ze="mini’ bindtap="redirectTo™>2 
</putton> 
< /Tiew> 
<VLewWw Class="'demo—box'> 
<vVview Class="title' >(4}wx.reLaunch</view> 
<button type="pPrimary” SizZe="mini’ bindtap="reLaunch"> 午 上 扯 
</Vview> 
<View Class='demo—box'> 
<view Class="title'>»>(S5}wx.switchTab</view> 
<button type="primary™ SlizZe="mini' bindtap="switchTab"> 切 净 
面 </button> 
</view> 


JS (pages/demo04mmavigatemavigate.js) 文件 代码 如 下 : 


Padge({ 
navigateTo: function() 1 
wx.nNnavigateTo (1{ 
url: '/pages/demo04/new/new', 
}) 
上 ， 
navigateBack:function() { 
wx.navigateBack({}) 
上 
redirectTo: function() { 
WX.IedirectTol(t{ 
url: '/pages/demo04/new/new', 
}) 
ls 


reLaunch:function()t 


运行 效果 如 图 11-10 所 示 。 
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| 


(4)wx.reLaunch 


(5)wx.switchTab 
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【代码 说 明 】 

本 示例 在 navigate.wxml 中 包含 了 5 个 <button> 按 钮 分 别 用 于 跳 转 新 页 | 
当前 页 面 重 定 向 、 重启 页 面 \ 切换 到 tabBar 例题 页 面 , 对 应 的 自 定义 函数 分 
navigateBack()、redirectTo()、reLaunch( 〇 和 switchTab()。 在 navigate.js 中 竺 
redirectIo0 和 reLaunch() 打 开 new.wxml 新 贝 务 ;定义 navigateBack() 返 回 1 
定义 switchTab(0 切 换 到 tabBarwxml 例题 页 面 。 

在 图 11-10 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 navigateTIo0 和 re 
面 的 效果 ， 区 别 在 于 前 者 还 能 返回 到 navigate 页 面 ， 后 者 只 能 返回 到 index 
重启 页 面 的 效果 ， 由 该 图 可 见 此 时 其 他 所 有 页 面 都 被 关闭 ， 无 法 回 到 上 一 5 
到 tabBar 例题 页 面 效 果 ， 此 时 其 他 非 tab 页 面 均 被 关闭 。 


国生 


小 程序 组 件 通过 animation 属性 来 显示 动画 ， 其 动画 效果 的 实现 需要 
动画 实例 ; 通过 调用 实例 的 方法 来 描述 动画 ; 通过 动画 实例 的 export0 方 法 : 
给 组 件 的 animation 属性 。 


11.5.1 动画 实例 


小 程序 使 用 wx.createAnimation(OBJECT) 可 以 创建 一 个 动画 实例 animl: 
其 OBJECT 参数 说 明 如 表 11-22 所 示 。 


表 11-22 wx.createAnimation(OBJECT) 的 参数 
参数 说 
duration 动画 持续 时 | 
timingFunction 定义 动画 的 ; 
delay Integer | 否 | 0 | 动画 延迟 时 | 
ed 设置 Gas 


timingFunction 的 有 效 值 如 下 。 
。 jlinear: 动画 从 头 到 尾 的 速度 是 相同 的 。 
e ease: 动画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 


vv hi A: 击 J 


I 


I 


I 


I 


11.S.2 ”动画 的 描述 
动画 实例 可 以 调用 animation 对 象 的 相关 方法 来 描述 动画 ， 在 调用 结 柬 
animation 对 象 的 方法 可 以 分 为 6 类 ,分 别 用 于 控制 组 件 的 样式 、 旋 转 
斜 和 算 阵 变形 。 
控制 组 件 样 式 的 方法 如 表 11-23 所 示 。 
表 11-23 animation 对 象 万 法 (样式 


方 法 参 数 说 明 
opacityO 透明 度 ， 参 数 范围 为 0 一 1 
backeroundColor() 颜色 人 
i Eo a 则 默认 使 用 px，F 
i 攻 度 信 ， 如果 传 入 Number 风 于 使用 px 
长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px，66 
length | 位 的 长 度 值 
长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px，66 
0 ee 位 的 长 度 值 
i 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 
位 的 长 度 值 
aa 则 默认 使 用 px， 


控制 组 件 旋转 的 方法 如 表 11-24 所 示 。 
表 11-24 animation 对 象 方法 〈 旋 转 ) 


方 法 参 数 说 明 

rotate() deg 的 范围 为 -180 一 180， 从 原点 顺 时 针 旗 
rotateX() deg deg 的 沁 围 为 -180 一 180， 在 XX 轴 旋 转 一 个 
rotateY () deg 的 范围 为 -180 一 180， 在 立轴 许 转 一 个 
rotateZ0 deg 的 范围 为 -180 一 180， 在 志 轴 旋转 一 个 
rotate3d0O 5] transform-fonction rotate3d() 


控制 组 件 缩放 的 方法 如 表 11-25 所 示 。 
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表 11-26 animation 对 象 方法 〈 偏 移 ) 


方 。 法 说 明 


当 一 个 参数 时 ， 表 示 在 义 轴 偏 移 人 当 两 个 参数 时 
translate() tx.|[ty| gK、 在 立轴 偏 移 fy 
translateX() 在 六 轴 仿 移 长 
translateY'() 在 立轴 俩 移 区 
translateZ() 在 之 轴 侦 移 世 


translate3d() 在 琉 轴 仿 移 蕉 、 在 YY 轴 仿 移 ty、 在 Z 轴 仿 移 
注意 : 偏 移 单位 均 为 px. 
控制 组 件 倾斜 的 方法 如 表 11-27 所 示 。 


表 11-27 animation 对 象 方法 〈 倾 斜 ) 
说 明 


参数 范围 为 -180~180。 当 一 个 参数 时 ，Y 轴 坐 标 不 过 
针 倾斜 ax 度 ， 当 两 个 参数 时 ， 分 别 在 义 轴 倾斜 ax 度 、 


ax.[ay] 
skewXO J 参数 范围 为 -180 一 180。YY 轴 华 标 不 变 ，X 轴 上 华 标 沿 顺 


vi y 参数 范围 为 -180~180。 义 轴 坐 标 不 变 ，Y 轴 坐 标 沿 顺 


skew!) 


控制 组 件 矩 阵 变 形 的 方法 如 表 11-28 所 示 。 


表 11-28 ”animation 对 象 方法 (和 矩 阵 变 形 ) 
万 法 参 数 说 有明 
matrix() 上 加 CSStransform-function mat 
matrix3d() UU 辣 CSStransform-function mat 
animation 对 和 象 多 计 用 尸 将 任意 多 个 动画 方法 人 退 加 在 同一 行 代 人 码 中 , 表 ; 
动画 内 容 ， 在 调用 动画 操作 方法 后 还 需要 调用 step0 来 表示 一 组 动画 完成 。 
例如 : 


animation.scale(2) .rotate (90) .backgroundColor('purple')}) .stepl() 


有 古 此 


的 animation 属性 中 ， 这 样 才 可 使 得 组 件 具 有 动画 效果 。 


以 <view> 组 件 为 例 ，WXML 代码 如 下 : 


<view animation="{TanimationDatalt}"></view> 


I 


下 


JS 代 人 友 如 下 : 


/1/1 .创建 animation 对 象 


. Var animation~=~wx.createAnimat1ion () 


/ /2 . 摘 述 动画 


. animation.scale (2) .step() 


//3. 守 出 至 组 件 的 动画 属性 


- this.setDatal({animationData:animation.export () |}) 


小 程序 也 允许 多 次 调用 export0 方 法 导出 不 同 的 动画 搬 述 方法 。 
例如 刚才 的 JS 代码 可 以 更 新 为 如 下 内 容 : 


/ /1 .创建 animation 对 象 


. Var animation~wx.createAnimation () 


/ /2 .描述 第 一 个 动画 


. animation.scale (2) .step() 


//3. 守 出 至 组 件 的 动画 属性 


. this.setDatal({animationData:animation.export()}) 


/7/4. 摘 述 第 二 个 动画 


- animation.rotate (180) -SteP () 


//5. 了 导出 至 组 件 的 动画 属性 


-Tthis.setData({animationData:animation.export(}}) 


此 时 一 组 动画 完成 后 才 会 进入 下 一 组 动画 ， 每 次 调用 sxgportO 后 会 履 着 
【 例 11-10】 界面 API 之 动画 的 综合 应 用 

本 示例 将 用 于 展示 本 节 所 学 组 件 动画 的 几 种 变形 方式 ， 包 括 如 下 内 容 : 
旋转 、 缩 放 、 偏 移 、 倾 斜 ; 


。 问 时 播放 全 部 动 男 ; 
。 依 光 播放 每 一 个 动画 ; 
。 还原 组 件 的 切 始 状态 。 


WXML (pages/demo05/animation/animation.wxml)》 文件 代码 如 下 : 


。<View class='title'>5. 动 男 </view> 
. <VIieEW Class='demo—box'»> 
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2 width: 220r7px; 
height: 220rpx; 
4. background—color: lightgreen; 
二 margin: 20rpx auto; 
6. line—height: 220rpx; 
Ra 
3. buttont 
margin: lO0rpx; 
1 
JS (pages/demo05/animation/animation.js) 文件 代码 如 下 : 
1. Pagel| 
2 /7 旋转 
3 rotate: functiont() 1 
4 this.animation.rotate (45} .step{() 
Ea this.setDatal({ animation: this.animation.export() 
6 } ， 
7 /7 缩放 
8 scale: function()} I 
9 this.animation.scale (0 .5} .step() 
10. this.setDatat({ animation: this.animation.export() 
li 4 
12. // 偏 移 
13. translakte: Tunctionty 4 
1 浊 . this.animation.translate (100, 20) .Step tj 
| 隐 this.setDatat({ animation: this.animation.export() 
1l6. |, 
17. // 倾 斜 
18. skew: function() 1 
下 全 this.animation.skewX (45) -Step 1() 
20U . this.setDatat({ animation: this.animation.export() 
1. 上 


22 . // 同 时 动画 


23.. SYnc: FUunctiorty 1 


村. this.animation.rotate(45) .scale(0.5) .translate (100, 
Ss this.setDatat({ animation: this.animation.export() 
0 1 

27. // 依 次 动画 

28. queue: function() | 


2 this.animation.rotate(45} .Step() .scale(0.5) .step() 


}) 


上) 


}) 


}) 


3 
}) 
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【代码 说 明 】 

本 示例 在 animation.wxml 中 包含 了 一 个 市 有 animation 属性 的 <view> 丝 
并 在 animation.wxss 中 设置 该 组 件 的 宽 、 高 均 为 220rpx， 浅 绿色 背景 ;在 - 
4 个 <button> 迷 你 按钮 分 别 用 于 为 组 件 实 现 旋 转 、 红 放 、 仿 移 和 倾 冬 的 动画 
义 团 数 是 rotateO0、scaleO0、translate0 和 skewO; 男 有 3 个 <button> 普 通 按 4 
同时 动画 、 依 次 动画 和 还 原初 始 状态 ， 对 应 的 目 定 义 图 数 是 sync()、que 
animation.js 的 onReadyO 国 数 中 姑 首 每 次 动 男 的 持续 时 间 为 3 秒 。 

在 图 11-11 中 ,图 (a) 为 页 面 初始 效果 ; 图 (b) 一 图 (e) 分 别 为 组 但 
图 (f7 为 这 4 种 动画 效果 同时 完成 后 的 效果 ， 如 果 选 择 依 座 动 画 ， 最 终 一 | 
图 只 能 看 到 动画 完成 后 的 最 后 一 帆 ， 开 友 者 可 以 运行 代码 得 看 完整 动 男 过 


小 程序 使 用 wx.pageScrollIo(OBJECT) 将 页 面 深 动 到 目标 位 置 ， 访 接口 
始 文 持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-29 所 示 。 


表 11-29 wx.pageScrollTo(DBJECT) 的 人 参数 
参 数 名 必 填 说 明 
scrollTop 深 动 到 页 和 面 的 目标 位 置 (单位 ; 
ei 滚动 动 面 的 时 发， 默认 为 300a 
wxX.pageScrollIo(OBJECT) 示 例 代 码 如 下 : 
。 WX -PageScCIOTLLIo (1{ 


1 

2 SCrollTop: 0， 
可 duration: 3000 
— 


- }) 


上 述 代 人 码 表 示 将 页 面 深 动 回 最 项 闹 ， 动 画 效 果 为 3 秒 1 
【 例 11-11】 界面 API 之 页 面 位 置 的 简单 应 用 
WXMIL (pages/demo06/scrollscrollwxzml) 文件 代码 如 


。 ”< 过 WIIeW class='title>6. 页 面 位 置 </view> 
视频 讲解 过 WEW Class='demo—box'> 


ae ERIC 二 站 


2. // 回 到 项 部 

backToTop: functiont()l1 
4. wxXx.pageSsScrollTol(t 
5 ScCrolLTop: VU, 

6. duration:2000 

1. }) 

8. } 

3 }} 


运行 效果 如 图 11-12 所 示 。 
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wx.pageSscrollTo(QBJECT) 的 用 法 
这 是 一 个 高 度 超 过 手机 屏幕 的 组 件 
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Ca) 页 面 拖 到 底部 效果 (b) 单 击 按钮 自动 返回 顶部 


图 11-12 页面 位 置 的 简单 应 用 


【 代码 说 明了 

本 示例 在 scroll.wxml 中 包含 了 一 个 局 1200mpx、 浅 贰 色 背景 的 <view>: 
可 以 滚动 到 撒 部 ;在 <view> 组 件 的 下 方 是 <button> 按 钮 ， 用 于 单 击 回 到 页 | 
定义 图 数 是 backToTop0O。 在 scrolljs 中 定义 backToTop0 方 法 实现 回 到 页 耐 ， 
秒 的 同上 深 动 动画 效果 。 
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在 画布 矩形 框 的 左上 角 ， 即 (0,0) 坐 标的 位 置 。 该 坐标 系 与 数 竺 坐标 系 在 水 - 
耻 方 同 为 镜像 对 称 。 也 就 是 说 ， 思 布 坐 标 系 的 水 平方 同 为 X 轴 ， 其 正方 同 
方 同 为 Y 轴 ， 其 正方 同 为 同 下 延伸 。 

具体 的 坐标 系 如 图 11-13 所 示 。 

罗 创建 空白 画布 

小 程序 使 用 <canvas> 组 件 呈 现 男 布 区 域 ， 因 此 盲 先 需要 在 WXML 页 | 
建 画 布 ， 并 必须 带 有 自 定义 的 canvas-id 名 称 。 例 如 : 
<Canvas Canvas-1q=ImyCanvas' style='border:lrpx solid'" ></can. 
上 述 代码 表示 声明 了 一 个 带 有 lrpx 宽 、 黑色 实 线 边 框 的 画布 , 其 canva 
画布 的 默认 尺寸 是 宽度 为 300px、 高 度 为 225px， 用 户 可 根据 实际 需要 
例如 规定 男 布 的 宽 、 高 均 为 600rpx， 居 中 显示 ， 其 WXSS 代 人 码 如 下 : 
canvastl 
Wwidth: O00rpxs 
height: 600rpx; 


margin: 0 auto; 


} 


i 


画布 效果 如 图 11-14 所 示 。 


图 11-13 ”画布 坐标 系 图 11-14 ”创建 空 月 画布 


开 友 首 也 可 以 目 行 在 WXSS 文件 中 草 新 规定 画布 的 尺寸 、 痛 景 闫 色 等 

图 创建 画布 上 下 文 对 象 

小 程序 使 用 wx.createCanvasContext(canvasId) 创 建 男 布 上 下 区 对 象 , 然 | 
yn wa A 7 i 


11.7.2 绘制 算 形 


创建 矩形 
小 程序 使 用 画布 对 象 的 rect0 方 法 创建 矩形 ， 然 后 使 用 fil10 或 stroke0- 


实心 矩形 或 描 边 空心 矩形 。 其 语法 格式 如 下 : 


ctx.rect (x, Yr width, height) 


其 参数 说 明 如 下 。 

e X: Number 关 型 ， 赴 形 左 上 角 上 点 的 zx 坐标 。 
ey: Number 类 型 ， 赴 形 左 上 角 上 点 的 了 坐标。 
es。 width: Number 类 型 ， 托 形 的 宽度 。 

。 height: Number 类 型 ， 和 矩形 的 高 度 。 


例如 : 
1. Page l(t{ 
-a onLoad: function(options) I 
i Const ctx~wx.createCanvasContext ('myCanvas') / /创建 画 
= Ct. Tect (5350, 50, 200, 200) 

/ /描述 一 个 左上 角 坐 标 为 (50，, 50) 、 宽 和 高 均 为 200 像素 的 矩形 

< ctx.setFillstvylel('orange") / /描述 填 
6. ctx E1111) / /描述 填 
了 Ctx.drawt() / /在 田 布 
8. } 
3. 上 


运行 效 末 如 图 11-15 所 示 。 
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其 参数 与 创建 矩形 的 rect0 方 法 的 参数 完全 相同 。 
描 边 矩形 
小 程序 使 用 画布 对 象 的 strokeRect0) 方 法 直接 在 画布 上 描 边 空心 矩形 ， 


ctx.strokeRect (x YA width, height) 


其 参数 与 创建 和 矩形 的 rect0 方 法 的 参数 完全 相同 。 
清空 矩形 区 域 
小 程序 使 用 画布 对 象 的 clearRect( 方 法 清空 矩形 区 域 ， 其 语法 格式 如 1 


ctx. ClearRect (x, yr width, height) 


其 参数 与 创建 矩形 的 rect0 方 法 的 参数 完全 相同 。 
【 例 11-12】 青 面 API 之 给 制 算 形 的 综合 应 用 
本 示例 将 展示 矩形 的 几 种 绘制 方式 ， 包 括 如 下 内 容 : 
。 填 元 实心 矩形 ; 
讽 频 讲解 。 描 边 空心 矩形 ; 

。 清空 画布 大 小 的 息 形 区 靶 。 

WXML (pages/demo07/rect/rect.wxml) 文件 代码 如 下 : 


View Class="title >»?. < /view> 

. <View Cass= aqemo 一 DoX > 

<view class'title'> 绘 制 窍 形 </view> 

<canvas canvas-id='myCanvas'" style='border:1lrpx solid'></ 
<button type="pPIrimary' SizZe= "mini’ pindtap="filiRect"S> 杆 大 
<button type="'primary' Sl1Ze= "mini' bindtap='strokeRect'> 打 
<button type="'pIrimary' Size= "mini’ bindtap'clearRect'> 清 : 
. </Vview> 


WXSS (pages/demo07/rect/rect.wxss) 文件 代码 如 下 : 


1. buttont 
margin: 1]0rpxs 


[5 


2 


JS (pages/demo07/rect/rect.js ) 文件 代 人 码 如 下 : 


1]. Pagel(l 


18. ctx.clearRect (OU 300, 300) 


1 ctx.drawt{) 

20- 上 

21. onLoad: function(options) 1{ 

Fa this.ctx=wx.createCanvasContext ('myCanvas') / /创建 画 厦 
es ST 

4.1}) 


运行 效 末 如 图 11-16 所 示 。 
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(a) 填充 矩形 (b) 描 边 矩形 (c) 
图 11-16 ”绘制 征 形 的 综合 应 用 


【代码 说 明了】 

本 示例 在 rect.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 显示 填充 矩形 
转 | 布 效果 ， 对 应 的 目 定 义 图 数 分 别 是 flI]RectO、strokeRectO 和 clearRectO。 
fillRectO 方 法 用 于 绘制 一 个 左上 角 坐 标 在 (950.530)、 蜗 和 遍 均 为 200 像 系 有 
strokeRect0 方 法 用 于 绘制 一 个 左上 和 角 坐 标 在 (100,100)、 冤 和 禹 均 为 100 像 ; 
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条 线段 到 初始 坐标 位 置 来 团 合 图 形 。 此 方法 不 是 必需 的 ， 夺 画笔 的 : 
急 始 坐标 位 置 ， 则 访 方 活 可 以 省 略 不 与 。 

。 stroke0: 在 图 形 轮廓 勾勒 完毕 后 南 要 执行 坊 方 法 才能 正式 将 路 径 泻 

。 fil10: 用 户 可 以 使 用 该 方法 为 图 形 填充 闫 色 ， 生 成 实心 图 形 。 夺 并 ; 
方法 来 团 合 图 形 ， 则 在 此 方法 被 调用 时 会 目 动 生成 线段 连接 画笔 当 1 
坐标 位 置 ， 形 成 闭合 图 形 然 后 青 进行 填 元 闫 色 。 

绘制 线段 

绘制 线段 主要 有 以 下 两 种 方法 。 

。 moveTo(x,y): 将 当前 的 男 笔直 线 移动 到 指定 的 CgJ) 坐 标 上 ， 并 且 不 | 
该 方法 可 以 定义 线段 的 初始 位 置 。 

e lineTlo(x,y): 将 当前 的 画笔 且 线 移动 到 指定 的 (x,y) 坐 标 上 ， 并 且 夯 出 ; 
法 可 以 进行 线段 的 绘制 。 

最 后 同样 需要 使 用 strokeO 方 法 绘制 线段 , 在 使 用 该 方法 之 前 的 所 有 绘 

制 ， 可 以 将 其 理解 为 透明 的 轨迹 ， 访 轨迹 不 会 显示 在 画布 上 。 


例如 : 
1 Ctx-bedinpathl) /V 开 始 摘 述 路 径 
2 。 Ctx.moveTo(50,50) / /将 转 笔 放 到 [50,50) 坐标 点 上 准备 绘制 路 笃 
3 Cex LineTo(1i00, 100) // 贺 一 条 线段 至 (100,100) 坐标 点 
4. ctx.stroke() / /设置 描 边 效果 
5. ctx.draw() / /人 绘制 到 画布 上 


注意 : 在 绘制 线段 时 beginPath0 方 法 也 可 以 省 略 不 写 ， 在 所 有 的 轨 立 
stroke0 方 法 可 以 实现 一 样 的 效果 . 


【 例 11-13】 表面 API 之 绘制 线段 的 简单 应 用 
WXML (pages/demo07/pathpath.wxml) 文件 代码 如 下 


> 
2. <View Cass= aemo 一 boOX > 
视频 讲解 3 <view Class='title'> 绽 制 线段 </view> 
<Canvas canvas—-id='myCanvas'" style='border:lrpx solid'></ 
<button type="'primary' SlizZe="'mini'" bindtap="strokePath' > 摘 


=-] 晤 由 


<button 七 YPe= PIT1Imary SizZe= "mini’ indtap=tifTpat6h7 > 过 天 
. </view> 


-}) 


ctx..moveTo(lo50, 15) 
ctx.l1ineTo(t225, 2250) 
ct ineTotlis. ZZ9) 
ctx.closePathl) 

上 ， 

/7/ 摘 边 路 径 

strokePath:functiont()Ii 
半 总 志 ” 尼 毛 买 三 七 所 下 号 它 萎 蕊 
this.drawSsample () 
ct .SetotrokesSstEvlier 三 人口 
ctx.strokerl) 
ctx.drawt{) 

}, 

/ /填充 路 笃 

fillPath: function() 1 
Tet ctx=this.,.ctx 
this.drawSsample () 
ctx.setFillStyle('blue") 
避让 芭 下 和 二 E01 
ctx.drawt) 

}, 

onLoad: function (options) 1{ 
/ /创建 男 布 上 下 文 
this.ctx=wX.createCanvasContext ('myCanvas') 


} 


运行 效果 如 图 11-17 所 示 。 
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(75，225)。 在 strokePathO0 和 fllPathO 方 法 分 别 调用 drawSample0 方 法 绘制 : 
置 男 笔 赢 色 并 绘制 图 形 。 

在 图 11-17 中 ， 图 (a) 为 描 边 路 径 的 效果 ， 此 时 绘制 出 红色 边框 的 空 ， 
为 需 宛 路 径 的 效果 ， 此 时 绘制 出 填 宛 晤 色 的 实心 三 角形 。 

绘制 圆 缴 

除了 下 线路 径 外 ， 小 程序 还 可 以 使 用 画布 对 象 的 arc0 方 法 绘制 圆 弧 路 
tx Arctx, vy, radinus, Startangle, endangle, anticlockwiaey 

arc0 函 数 共 包含 了 6 个 参数 ,说 明 如 下 : 

。X 和 y 表示 圆心 在 (x;y) 坐 标 位 置 上 ; 

e radius 为 圆 跌 的 半径 ， 默 认 单 位 为 像素 ; 

。 startAngle 为 开始 的 角度 ，endAngle 为 结束 的 角度 ; 

e anticlockwise 指 的 是 绘制 方 回 ， 可 填 入 一 个 布尔 值 ， 其 中 true 表示 

表示 逆 时 针 绘 制 。 


注意 : arcO 函 数 中 的 角度 单位 是 弧度 ， 在 使 用 时 不 可 直接 填 入 度数 单位 
转换 公式 如 下 : 
弧度 =m/180x 度 数 
在 JavaScript 中 转换 公式 的 写法 如 下 : 


radians=Math.PI/180*degrees 


其 中 特殊 弧度 半圆 (180°) 转换 后 弧度 为 x， 圆 (360°) 转换 后 弧度 > 
中 用 户 夺 遇 到 这 两 种 情况 可 以 免 于 换算 ， 直 接 使 用 转换 结果 。 
绘制 贺 弧 时 的 旋转 方 回 和 对 应 的 弧度 如 图 11-18 所 示 。 
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【 例 11-14】 表面 API 之 绘制 圆 听 的 综合 应 用 
WXMI (pages/demo07/arc/arc.wxml) 文件 代码 如 下 : 


<viaw Class—"title'»>7. 尝 轩 < /view> 
<View Class='demo—box'> 

<view class='title'> 绘 制 圆 员 </view> 

<cCanvas canvas-id='myCanvas'" style='border:lrpx solid'></ 
</Vview> 


JS (pages/demo07/arc/arc.js〉 文 件 代 码 如 下 : 


Page (1{ 
onLoad: function(options)} I{ 
/ /创建 男 布 上 下 文 


const ctx~=wx.createCanvasContext ("myCanvas'") 


// 届 置地 充 闫 色 为 页 色 


9 vellow') 


// 绘 制 圆 形 的 脸 ， 并 填充 为 黄色 
ctx.beginPathl() 
ctx.arc(l150, 150; 80, 0, Math.PLl + 2, true) 


ctx.strokel) 

/ /如 采 不 十 要 勾勒 脸 的 轮廓 ， 此 人 句 可 省 上 略 
Ee 

// 设 置 填 元 闫 色 为 黑色 


ctx. SetFillstyvlert black"'} 


// 填 元 黑色 的 左 眼 

ctx.beginPatht{) 

ctxarctl90. 1305 10 0; Math:PLl * 2, true) 
i 


// 填 元 黑色 的 右 眼 

ctx.beginPatht() 

ctx.arc{(lli0, 130, 10, 0O, Math.PLl + 2, true) 
Ee 


/ /绘制 汕 有 弧度 的 笑容 

ctx.beginPath()} 

ctx.arc{(l150, 160, 50, O00, Math.PI, false) 
ctx.strokerl) 
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绘制 曲线 

在 小 程序 中 绘制 曲线 的 原理 来 自 于 贝 塞 尔 曲 线 (Bezier Curve)。 贝 图; 
曲线 或 者 贝 济 埃 曲 线 ， 由 法 国 数 学 家 Pierre Bezier 发 明 ， 是 计算 机 图 形 学 ' 
曲线 ， 也 是 应 用 于 2D 图 形 应 用 程 厅 的 数学 曲线 。 贝 窜 尔 曲线 由 曲线 与 市 . 
控制 线 和 控制 点 可 以 拖 动 ， 曲 线 在 节点 的 控制 下 可 以 伸缩 (如 图 11-20 所 万 
软件 用 其 来 精确 地 绘制 曲线 ， 例 如 Adobe Photoshop、Adobe Ilustrator 等 。 
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贝 秆 尔 曲线 一 般 用 来 绘制 较为 复 末 的 规律 图 形 。 根 据 控制 点 的 数量 不 | 
为 二 次 方 贝 塞 尔 曲 线 和 三 次 方 贝 曼 尔 曲线 。 
二 庆 方 贝 压 尔 曲线 的 语法 结构 如 下 : 


ctx.quadraticCurveTo(cplx, cply, Xxr Y) 


其 中 (cplx,cp1y) 为 控制 上 感 的 坐标 ，(x;y) 为 结束 后 的 坐标 。 


oD. </view> 


JS (pages/demo07/bezierbezierjs) 文件 代 公 如 下 : 


) 


-2) 5 


F 


40); 


1. Pagel(l 

onLoad: function(options)} I 

3. / /创建 男 布 上 下 文 

4. Const ctx=wx.cCcreateCanvasContext ("myCanvas' 
I / /设置 圳 充 闫 色 为 红色 

6. 0 Ted }s 

Te // 三 次 贝 罕 尔 曲线 

8 。 i 

ctx.mOoveTo (90 ， 

10. ctx.bezijerCurveTol(yd J Bo A400 G5 40 
I ctx.bezierCurveTol(3 I TR 

有 ctx.bezierCurveTol(3 oe Do di SO B33 
1 ee Li Dam hye Md LL 
14. ctx.bezierCurveTo(l4o, Fi.o, 145, 40, 115, 
le ctx.bezierCurveTo(l00, 40, S90, D2, S00, D5); 
16. ctxetiTl()s 

7 / /绘制 到 画布 上 

1] 心 . Ce 

ee 

20 .|) 


运行 效果 如 图 11-21 所 示 。 
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11.7.4 绘制 文本 
填充 文本 
小 程序 提供 人 llTextO 方 法 用 于 在 男 布 上 绘制 实心 文本 内 容 ， 其 语法 结 
ctx.fillText (text, x: Vy: maxWidth) 
其 参数 说 明 如 下 : 
etext 为 String 类 型 ， 表 示 文 本 内 容 ， 实 际 填写 时 需要 在 文本 内 容 的 育 
。x 和 y 均 为 Number 类 型 ， 表 示 文 本 左上 角 将 被 绘制 在 画布 的 (x,y) 举 
。maxWidth 为 Number 类 型 ， 是 可 选 参 数 ， 指 的 是 绘制 文本 的 最 大 宽 
例如 : 


Ct 11TeXt I" 全 20， 30) 
上 述 代 个 表示 以 画布 坐标 (20,30) 的 位 置 作为 文本 的 左上 和 角 绘制 “你 好 


设置 字体 大 小 
小 程序 提供 setFontSizeQ) 方 法 用 于 人 充 置 字体 大 小 ， 其 语法 结构 如 下 : 


ctx.setEontSize (fontSize) 


其 中 参数 fontSize 是 Number 类 型 ， 表 示 字 体 的 字号 大 小 。 
例如 : 


ctx.setEontSize (20) 


上 述 代 码 表示 字体 的 字号 为 20 号。 
设置 文本 基准 线 
小 程序 提供 setIextBaselineO0 方 法 用 于 设置 文本 的 水 平方 回 基 准 线 ， 其 


ctx.setTextBaseline (textBaseline) 
ctx.textBaseline~textBaseline // 从 基础 库 1.9.90 开始 支持 


下 cST* i .1 


设置 文本 对 齐 万 式 

小 程序 提供 setTextAlign0 方 法 用 于 设置 文本 的 对 齐 方式 ， 其 语法 结构 
ctx.setTextAlign (align) 

或 
ctx.textAliqgn=align // 从 基础 库 1.9.90 开始 支持 


其 中 参数 align 是 String 关 型 ， 可 选 全 为 leftt、'center、Tight， 分 别 表 : 
右 对 齐 3 种 效果 。 参 照 效果 如 图 11-23 所 示 。 


extAlign=|eft 
textAligm=center 


textAlign=righ 


图 11-23 ”文本 对 齐 方式 参照 效果 
例如 : 


ctx.setTextAliqgn(' center") 


上 述 代码 表示 将 文本 设置 为 居中 显示 。 
设置 字体 风格 
在 绘制 之 前 也 可 以 使 用 画布 上 下 文 对 象 的 font 属性 自 定义 字体 风格 ， 


ctx.font=value 


参数 value 的 默认 值 为 10px sans-senf， 表 示 字 体 大 小 为 10px、 字 体 家 
value 文 持 的 属性 如 下 。 

e style: 字体 样式 ， 仅 文 持 italic、oblique、normal。 

e weight: 宁 体 粗细 ， 仅 文 持 normal、bold。 

e size: 字体 大 小 。 

e family: 字体 族 名 。 注 意 确 认 各 平台 所 支持 的 字体 。 
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JS (pages/demo07/textbtext.js) 文件 代码 如 下 : 


Page ({ 
onLoad: function(options)} I 
Const ctx~=wx.CreateCanvasContext ("myCanvas'") 
/ /设置 字 与 
ctx.setFontSize(40) 


人 


// 设 置 文本 水 平 基准 线 
ctx.setTextBaseline('bottom"') 
9. / /填充 文字 
1 看.。 ctx.fillText ("你 好 '， 30,， 150) 
1 
和 / /设置 填 元 闫 色 
1 ctx.setFillStyle('green') 
1 // 设 置 文 本 水 平 基准 线 
1 下 SEITextBaselinel Eton ) 
16. / /填充 文字 
1 ctx .fillText (' 微 信 小 程序 '，80，150) 
18， ctx.drawt() 
1 
20.1) 


运行 效果 如 图 11-24 所 示 。 
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11.7.5 绘制 图 片 


绘制 原 图 
小 程序 使 用 drawImage0 方 法 绘制 图 片 ， 其 语法 结构 如 下 : 


ctx.drawlImage (src, dx, dy); 


其 中 ，src 是 String 类 型 的 参数 ， 表 示 图 片 资 源 的 路 径 : dx 和 dy 均 为 
的 是 所 绘制 图 片 的 左上 角 在 男 布 的 (dx.dy) 坐 标 上 。 

缩放 图 片 

图 片 的 大 小 可 以 在 绘制 时 进行 缩放 ， 其 语法 结构 如 下 : 


ctx.drawImage (src, dx, dy,: dWwidth, dHeight) 


该 方法 比 普 退 绘 制图 片 的 方法 多 出 两 个 Number 类 型 的 参数 dWidth 和 
于 规定 图 厂 缩 放 后 的 览 度 和 和 局 度 。 

图 片 的 切割 

在 绘制 图 片 时 可 以 根据 实际 需要 对 原 图 进行 切割 ， 只 显示 指定 的 区 域 
如 下 : 


ctx.drawlImage (src, sx SV SWIdth, sHeight, dx, dy, dWidth, dF 


该 方法 有 9 个 参数 ， 说 明 如 下 : 

e src 是 图 片 资 源 的 路 任 地 址 ; 

。 sx 和 sy 表示 将 从 原 图 片 的 (sx.s) 坐 标 位 置 进行 切割 截图 ; 

。 和 截图 的 矩形 客 展 为 sWidth， 忆 度 为 sSHeight; 

e dx 和 dy 表示 切割 后 的 图 上 三 将 显示 在 画布 的 (dx,dy) 侍 标 位 置 上 ; 
。 在 画布 上 将 截图 的 宽度 缩放 为 dWidth、 高 度 缩放 为 dHeight。 
【 例 11-17】 界面 API 之 绘制 图 片 的 综合 应 用 

本 示例 将 展示 绘制 图 记 的 几 种 绘制 方式 ， 包 括 以 下 内 容 : 

。 绘制 原 图 ; 

。 红 放 图 上 厂 ; 

e。 切割 图 请 并 缩放 。 

WXMI (pasges/demo07/imase/imase.wxml) 文件 代 但 如 下 : 


< 微 信 小 程序 开发 零 基础 入 门 


JS (pages/demo07/image/image.]s) 区 件 代 人 码 如 下 : 


1. Padge (i 

2 / /绘制 原 图 

加 drawlmage01l1: function() (| 

4. let ctx=this .ctx 

与 ctx.drawImage ('/images/demo07T/weixin.jpg', 0, 0) 
c ctx.drawt) 

1. 上 7 

.  // 纵 放 图 片 

= drawlImage02: function()} I 

10. let ctx=this .ctx 

1 ctx.drawImage ('/images/demo07/weixin.jpg', SO, S50O, 200, 
3 ctx.drawt) 

13. }, 


14. 7V/ 图 片 切割 
152- drawlmage03: ftunction() 1 


16. let ctx=this .ctx 

9 ctx.drawImage ('/images/demo07/weixin.jpg', 210, 90, 160, 160, 
18. ctx.drawt) 

13. 1}, 

20. onLoad: function(options) 1{ 

迪生 二 this.ctx=wx.createCanvasContext ('myCanvas') / /创建 田 布 上 
Ts 

3.1) 
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给 市 图片 绘制 图片 


对 应 的 上 自 定 义 图 数 分 别 是 drawImasge010、drawImasge020 和 drawImasge030 
义 drawImasge010 方 法 用 于 从 男 布 的 左上 角 原 点 处 开始 绘制 图 片 ; 定义 dra 
于 在 画布 坐标 (50.50) 处 开始 绘制 图 片 ， 并 且 把 原 图 缩放 成 帘 、 遍 均 为 200 1 
drawImage030 用 于 以 原 图 的 210.90) 坐 标 作为 在 上 和 角 切 割 一 块 宽 、 凯 均 为 - 
将 其 左上 角 点 显示 在 画布 (50,50) 的 位 置 上 并 放大 至 知 、 高 均 为 200 像 系 。 

在 图 11-25 中 ,图 (a) 为 绘制 原 图 效果 ， 此 时 图 瞩 并 不 完整 ， 只 能 显 志 
图 (b) 为 缩放 图 片 的 效 末 ， 此 时 图 上 户 大 小 友 生 了 改变 ; 图 (c) 是 切割 图 ， 
可 以 只 旺 示 其 中 的 微 信 图 标 。 


11.7.6 ”颜色 与 样式 


国 颜色 透明 度 
小 程序 可 以 使 用 setGlobalAlpha0 生 成 半 透 明 色 作 为 画布 上 的 图 形 轮廓 
其 语法 结构 如 下 : 


ctx.setGlobalAlpha (alpha) 


或 
Ctx qlobalnAlpha aleha // 从 基础 库 1.9.90 起 支持 


画布 中 指定 的 图 形 会 极 alpha 的 属性 值 影 | 问 透 明度 ， 有 效 值 沁 围 为 0.0 
示 完 全 透明 ，1.0 表示 完全 不 透明 。 
例如 设置 透明 度 为 0.5〈 半 透明 )， 写 法 如 下 : 


ctx.setGlobalAlpha (0 .5) 


globalAlpha0 适 合 批量 设置 图 形 颜色 
【 例 11-18】 表面 API 之 颜色 透明 度 的 简单 应 用 
WXML (pages/demo07/alpha/alphawxml) 文件 代码 如 下 : 


ZCwW ClIAoS= Ito] Se/ Iie 

. <V1iew Class='demo—box'> 

<view Class='title'> 闫 色 和 咀 明度 </view> 

<Canvas canvas-id='myCanvas'" style='border:1lrpx solid'></ 


性 


<button 七 YPe= - PI1Imary ” S1LZze= mLIDnI- Re > 省 


ey eT CO We | 


号 列 微 信 小 程序 开发 零 基础 入 门 


也 let ctx=this .ctx 

Sh CtsSetEll1lIStylelt oqreen’) 
6. 二 iliRect(tior To Lo0. 1o50) 
1 ctx.drawl) 

8. 上 7 

9. /7/ 不 透明 

10. setAlpha0l: functiont(} { 
1 iet ctx=this;,ctx 

Ls ctx.setGlobalAlphal(l) 

1 3 this.drawBoxt() 

14. 上 上， 


15. // 半 透明 


16: setAlphag2: functiont(} 1 


| let ctx=this .ctx 

1 ctx.setGlobalAlpha(0 .so) 
于 this.drawBoxt() 

= 


21- /7/ 全 透明 
22. SetAlpha03: function() 1{ 


2 let ctx=this .ctx 

?4. ctx.setGlobalAlpha(0) 

ps this.drawBoxt{) 

260 

21. onLoad: function(options)} { 

AB. this.ctx=wX.createCanvasContext ('myCanvas') 
a this.drawBox() 

3 

31.}) 


运行 效果 如 图 11-26 所 示 。 
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中 育 先 定义 drawBox0 方 法 用 于 绘制 一 个 左上 角 在 (73,.73)、 宽 和 局 均 为 190 4 
形 ， 然 后 在 setAlpha010、setAlpha020 和 setAlpha030 中 均 使 用 setGlobalAlr 
度 ， 将 参数 分 别 设置 为 1、0.5 和 0。 

在 图 11-26 中 ， 图 (a) 为 不 透明 效果 ， 和 矩形 为 绿色 ; 图 (b) 为 半 透 I 
变 淡 : 图 〈c) 是 全 透明 效果 ， 己 经 完全 看 不 到 矩形。 

线条 样式 

1) 设置 线条 宽度 

小 程序 使 用 setLineWidthO 设 置 线 条 的 宽度 ， 其 语法 格式 如 下 : 


ctx.setLineWidth (lineWidth) 


或 
ctx.lineWidth=l1ineWidth // 从 基础 库 1 .9 .90 起 支持 
其 参数 lneWidth 是 Number 类 型 ， 默 认 单 位 为 px。 
例如 : 
ctx.setLineWidth(10) 
上 述 代码 表示 设置 线条 宽度 为 10 像素 。 


2) 讽 症 线条 闯 氮 梓 陈 
小 程序 使 用 setLineCap0 设 置 线 条 器 点 样式 ， 其 语法 格式 如 下 : 


ctx.setLineCap (lineCap) 


ctx. limnmeCap=lineCap // 从 基础 库 1.9.90 起 支持 


其 中 参数 lneCap 表示 线段 两 边 顶 端的 形状 ， 有 3 种 属性 值 ， 说 明 如 | 

e butt: 线段 的 末端 以 方形 结束 ， 该 属性 值 为 默认 值 。 

。 round: 线段 的 末 问 以 半圆 形 凸 起 结束 。 

。 square: 线段 的 末 病 加 了 一 个 方形 ， 该 方形 的 客 度 与 线段 同 宽 ， 局 | 
有 具体 的 显示 效果 如 图 11-27 所 示 。 
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3) 设置 线条 交点 样式 
小 程序 使 用 setLineJoin0 设 置 线条 端点 样式 ， 其 语法 格式 如 下 : 


ctx.setLineJoin (lineJoin) 


ctx.l1ineJoin=]lineJoin // 从 基础 库 1.9.90 起 支持 


其 中 参数 lineJoin 表示 线段 之 间 连 接 处 的 拐角 样式 ， 有 3 种 属性 ， 说 昌 
e miter: 线段 连接 处 的 拐角 为 尖 角 ， 该 属性 人 为 默认 值 。 

。round: 线段 连接 处 的 扔 角 为 圆 形 。 

。 bevel: 线段 连接 处 的 抛 角 为 平角 。 

具体 的 显示 效果 如 图 11-28 所 示 。 


miter round bevel 


图 11-28 设置 lineJoin 为 不 同属 性 值 对 应 的 效果 
例如 : 


ctx.setLineJoin(' round'") 


上 述 代码 表示 设置 线段 连接 处 的 拐角 是 圆 形 效果 。 
4) 设置 虚线 效果 
小 程序 使 用 setLineDashO 设 置 线条 为 虚线 效果 ， 其 语法 格式 如 下 : 


ctx.setLineDash (Patterny offset) 


其 参数 说 明 如 下 。 

。 pattern: Array 数组 , 表示 一 组 搬 述 交 蔡 绘制 线段 和 间距 (坐标 空间 
e offset: Number 类 型 ， 表 示 虚 线 偏 移 量 。 

例如 : 


ctx.miterLimit—miterLimit // 从 基础 库 1.9.90 起 支持 


其 中 参数 miterLimit 为 Number 类 型 ， 表 示 最 大 斜 接 长 度 。 
例如 : 


ctx.setMiterLimit (4) 


多情 


上 述 代 码 表示 设置 最 大 笠 接 长 度 为 4。 
将 miterLimit 参数 值 分 别 设置 为 1、2、3、4， 显 示 效 果 如 图 11-29 所 


图 11-29 ”设置 miterLimit 为 不 同属 性 值 对 应 的 效果 
如 末 设 置 超过 最 大 斜 接 长 度 ， 连 接 处 将 以 lineJoin 为 bevel 来 显示 。 


【 例 11-19】 界面 API 之 线条 样式 的 简单 应 用 


WXMIL (pages/demo07/line/line.wxml) 文件 代码 如 下 : 


。<View Class='title'>7. 绘 图 </view> 
. < 过 WeW Class='demo—box'> 


<view class='title'>» 线 条 样式 </view> 

<Canvas canvas-id='myCanvas'" style='border:lrpx solid'></ 
<button type="pPrimary'" size©~=‘"mini' bindtap=' setLineWidth'> 祭 
<button type='primary" size~="mini" bindtap="setLineJoin' > 圆 
<button type='primary' size='mini' bindtap='setLineDash'> 庶 
<button bindtap='reset'> 还 原 </button> 


. </view> 


JS (pages/demo07/line/line.js) 文件 代码 如 下 : 


Page ({ 
/7 绘制 基本 图 形 


QrawSsample: tunction() { 


| es | 4 Tr 
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1 


上 
/ / 圆 形 交 点 


SetLineJoin: 


this.ctx.setLineJoin('" round") 


function't() 


this.drawSsample () 


}, 
/ /虚线 效果 


setLineDash: 


this.ctx.setLineDash([10,10|.,2) 


function'() 


this.drawSsSample () 


} ， 
/ /还 诛 


reset:function()t 
let ctx=this .ctx 
ctx.1]ineWidth=10 


Ctx. LineJoin='"'miter’ 


ctx.setLineDash([10,10|.,0) 


this.drawSsample () 


}, 


| 


{ 


onLoad: function (options) 


| 


this.ctx=wXxX.createCanvasContext ('myCanvas') 


this.ctx.l1ineWidth=1i0 


this.drawSsample () 


} 


-}) 


运行 效果 如 图 11-30 所 示 。 
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图 11-30 〈( 续 ) 


本 示例 在 lne.wxml 中 包含 了 3 个 <button= 迷 你 按钮 分 别 用 于 显示 加 粗 
的 线条 样式 ， 对 应 的 自 定义 函数 分 别 是 setLineWidthO、setLineJoin0 和 setL 
个 <button> 普 退 按 乌 用 于 还 原初 始 绘 图 效果 ， 对 应 的 目 定 义 妙 数 古 reset()。 
义 drawSample0 方 法 用 于 绘制 一 个 三 角形 ， 并 在 onLoad0O 上 数 中 设置 其 你 
像 系 ; 然后 定义 setLineWidth0 方 法 改变 线条 冤 撒 为 20 像 系 ; 定义 setLineJ 
的 3 个 了 项 站 改 为 圆 踊 形 : 定义 setLineDashO 疏 症 三 角形 边框 为 虚线 效 末 ，: 
10 像 对 。 

在 图 11-30 中 ， 图 (a) 为 页 和 面 初始 效果 ， 此 时 是 一 个 线条 宽度 为 10 4 
(b) 为 线条 加 粗 效 果 ;: 图 (c) 为 贺 形 交点 效 果 ; (d) 为 虚线 边框 效果 ， 

渐变 样式 


6】 微 信 小 程序 开发 零 基础 入 门 


效 打 定义 斋 包 与 湖 变 点。 其 语法 格式 如 下 : 


grd.addColorStop (position, color) 


其 中 position 参数 需要 填写 一 个 0 一 1 的 数值 ， 表 示 源 
例如 0.5 表示 在 渐变 区 域 的 正中 间 ; color 参数 需要 填写 一 

以 上 两 种 方法 所 创建 出 来 的 颜色 渐变 效果 均 可 当 作 一 
予 画笔 。 

【 例 11-20】 再 面 API 之 渐变 样式 的 综合 应 用 


Wn WXML (pages/demo07/gradient/gradient.wxml) 文件 人 
1. <view class='title'>7. 绘 图 </view> 
2. <View Class="'demo—box'> 
3. <view class='title'> 渐 变样 式 </view> 
4. <Canvas canvas-id='myCanvas'" style='border:l1lrpx solid'></ 
二 <button 七 YPe= PI1Imary SizZe= mlInI- bindtap='!1l1inear1> 线 性 渐 
6. <button type="'primary" size= "mini" bindtap="circular' > 圆 形 
1. </view> 


WXSS (pages/demo07/gradient/eradient.wxss) 文件 代码 如 下 : 


1. buttont 


到 沁 margin: lO0rpx; 
ee 
JS (pages/demo07/gradientygradientjs) 文件 代码 如 下 : 
1 Page l(t 
2. // 线 性 渐变 
人 linear: Tunctlonl() 1{ 
由: let ctx=this.ctx 
5. / /创建 渐变 
6. Var grd=ctx.createLinearGradient (O00, 0, 200, 200) 
有 grd.addCcolorstop(0, ‘blue") 
9、 grd.addColorSstop(l, "lightblue") 
9 . /7/ 画 图 形 
10. ctx.setFillSstyle (grd) 
了 ctxs tillRect (tos0s 50， 200. 200} 
人 ctx.drawt) 
13: Ts 


14. // 圆 形 渐 变 


运行 效果 如 图 11-31 所 示 。 
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(a) 线性 渐变 效果 (b) 圆 形 渐变 效果 
图 11-31 渐变 样式 的 综合 应 用 


【代码 说 明 】 

本 示例 在 gradient.wxml 中 包含 了 两 个 <button> 扫 钮 分 列 用 于 显示 线性 ; 
果 ， 对 应 的 目 定义 阔 数 分 别 是 lnear0 和 circularO0。 在 gradientjs 中 定义 lin 
一 个 实心 矩形 ， 该 矩形 具有 从 左上 和 角 蓝 色 到 右 下 角 浅 蓝 的 渐变 效果 ; 定义 
显示 一 个 实心 圆 形 ， 访 圆 形 具 有 从 圆心 系 色 加 外 逐渐 变 淡 至 日 色 的 渐变 效 : 

在 图 11-31 中 ， 图 (a) 为 线性 渐变 效果 ， 窍 形 的 冤 和 高 均 为 200 像 姑 
渐变 效 末 ， 圆 形 的 半径 为 100 像 系 。 

阴影 样式 

小 程序 使 用 setShadowO0 方 法 为 画布 中 的 图 形 或 文本 设置 阴影 效 末 ， 其 


sw | 站 Ce Es OE hE Se 
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ctx.setShadow (10, 10, 20, 'silver') 


上 述 代 人 码 表 示 设 置 一 个 模糊 级 别 为 20 的 银色 阴影 效果 ， 阴 影 相对 于 | 


均 偏 移 20 像素 的 距离 。 


‘DD 


在 画布 对 象 中 还 具有 4 个 属性 可 以 用 于 设置 阴影 单项 样式 ， 如 表 11-3 


表 11-30 ”CanvasContext 阴影 效果 相关 属性 


属性 名 种 性 值 解 释 
shadowOffsetX Number 用 于 设置 阴影 在 久 轴 方 品 的 延伸 距离 ， 
shadowOffsetY 用 于 设置 阴影 在 站 轴 方 回 的 延伸 距离 ， 
shadowBlur 用 于 设置 阴影 的 模糊 程度 ， 上 默认 值 为 0 
shadowColor Color 用 于 设置 阴影 的 颜色 ， 黑 认 什 为 透明 度 : 


因此 前 面 的 代码 也 可 以 修改 为 如 下 写法 : 


ctx.shadowOffsetXx=1]0 
ctx.shadowoffsetY=]1]0 
ctx.shadowBlur=20 
ctx.shadowColor= "silver'’ 


【 例 11-21】 界面 API 之 阴影 样式 的 简单 应 用 
WXML (pages/demo07/shadow/shadow.wxml) 文件 代 


1. <view class="title'>7. 和 从 图 </view> 
- <VIiew Class~='demo box'> 
3 <view class='title'> 了 阴影 样式 </view> 
<Canvas canvas—-id='myCanvas'" style='border:1lrpx solid'></ 


. </view> 


JS (pages/demo07/shadowy/shadow.js) 文件 代码 如 下 : 


Page ({ 
onLoad: functiont(options)} I 
const ctx=wx.createCanvasContext ('myCanvas') / /创建 画布 上 
ct setEilliStviel(l'liqhtqreean"y // 黄 置 填 充 冉 在 
ctx.setSshadow (10, 10, S50, 'gray') / /设置 阴影 
ctx.fillRect (75,;75,150,150) / /设置 填充 类 玫 
ctx.draw() / /给 图 
} 
}) 


民 aa fa 请 
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其 参数 说 明 加 下 总 
e。 image: String 类 型 ， 图 案 来 源 ， 仅 文 持 包 内 路 径 和 I 临 时 路 径 。 
。 repetition: String 类 型 ,图 各 草 复方 同 ， 有效 值 为 repeat、 repeat-x、re 
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图 11-32 阴影 样式 的 简单 应 用 


【 例 11-22】 表面 API 之 图 案 填 充 的 简单 应 用 
WXMIL (pages/demo07mpatternpattern .wxml) 文件 代码 如 下 : 


。 <TlLeW Class='title'y>i. 绘图- 疝 色 与 样式 </view> 
. < 过 WeW Class='demo—box'> 


<view class='title'> 绘 制图 案 </view> 
<CanNnvas Canvas—lid="'myCanvas" style='border:1rpx solid'> 
Canvass 


. </view> 


JS (pages/demo07/pattern/pattern.js ) 文件 代码 如 下 : 


- Page (tl 


onLoad: functiont(options) I{ 
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和 垂下 方 癌 艾 重 复 绘制 ,然后 使 用 setFillStyleO 方 法 设置 该 效 末 为 男 笔 十 区 
一 个 圆心 在 (150,150)、 举 答 为 100 像 系 的 圆 形 ， 并 使 用 0 方法 为 其 坦 元 | 
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11-33 ”图 案 填 充 的 简单 应 用 


11.7.7 保存 与 恢复 

在 小 程序 中 saveO0 和 restore(0) 方 法 是 绘制 复杂 图 形 的 快捷 方式 , 用 于 记 : 
画 状 态 。 在 绘制 复杂 图 形 时 有 可 能 临时 需要 进行 多 个 属性 的 设置 更 改 ( 例 1 
充 闫 色 等 效果 )， 在 绘制 完成 后 义 要 重新 恢复 初始 设置 进行 后 续 的 操作 。 


11.7.8 ”变形 与 剪裁 


图 像 的 变形 
在 小 程序 中 有 4 种 方法 可 以 对 在 画布 上 绘制 的 内 容 进 行 变 形 处 理 。 
s。 移动 《franslateOy。 移 动 图 形 到 新 的 位 置 ， 图形 的 大小、 形状 不 恋 。 


“原点 (0;0) 


偏 移 y 
新 X 轴 
和 入 让 
Y 轴 | 新 Y 轴 


11-34 ”画布 坐标 系 的 移动 效果 
例如 将 原点 水 平方 同 同 右 移 动 100 像 系 ， 垂 直方 同 不 楼 : 
ctx.translate (100,0); 
需要 注意 的 是 ， 每 一 次 调用 translate0 方 法 都 是 在 上 一 个 translate(O 方 ; 
动 原点 的 位 置 。 例 如 : 


1. ctx.translate (100,0); // 将 原 扣 水 平 同 右 移 动 100 像 聚 ， 目 前 位 置 在 (1 
2. ctx.translate (100,0); // 将 原点 继续 水 平 同 右 移 动 100 像 系 ， 目 前 位 置 在 
3. ctx.translate (0,100); // 将 原点 垂直 向 下 移动 100 像素 ， 目 前 位 置 在 (2( 


叉 此 每 次 都 需要 考虑 当前 忆 点 的 位 置 才能 进行 正确 的 移动 。 如 果 不 币 二 
呵 每 一 座 移动 ， 可 以 使 用 save0 与 restore0 方 法 恢复 原状 。 

2) 旋转 

在 小 程序 中 可 以 使 用 rotate0 方 法 对 图 形 进行 诈 转 处 理 。 其 基本 格 陈 如 


ctx.rotate (angle) 
其 中 angle 参数 震 要 项 入 顺 时 针 旋转 的 角度 ， 和 再 要 换算 成 跌 度 单位 。 


以 逆 时 针 旋 转 。 
例如 记 时 针 旋 转 90° 的 写法 如 下 : 


ctx.rotate (~-Math.PI/2); 


在 献 认 情 帝 下 ， rotateO 廊 法 以 男 I 布 的 原点 坐标 (0,0) 为 参照 点 进 行 图 形 | 


’' 和 
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4) 矩阵 变形 
在 小 程序 中 transform0 方 法 使 用 抢 阵 多 次 登 加 形成 更 复杂 的 变化 。 其 3 


ctx.transform(scalex, SkewX, SkewY, ScaleY, translatex, transl 


它 共 有 6 个 参数 ， 均 为 Number 类 型 ， 具 体 说 明 如 下 。 
e scaleX: 水 平 放 。 
e skewX: 水 平 倾 笠 。 
e skewY: 王 生 倾 冬 。 
e scaleY: 王 百 缩放 。 
e translateX: 水 平移 动 。 
e translateY: 王 直 移动 。 
如 采 需 要 禾 六 原 先 的 窍 阵 变 化 效果 ， 可 以 使 用 setTransform0 方 法 ， 其 


ctx.setTransform(scalex, skewX, SkewY, scaleY, translatex, tre 


其 参数 与 transformO 的 参数 完全 相同 。 

【 例 11-23】 表面 API 之 图 像 变形 的 综合 应 用 

本 示例 将 展示 图 像 变形 的 几 种 绘制 方式 ， 包 括 移动 、 
阵 变 形 。 
饮 频 讲 解 WXML (pages/demo07/transform/transform.wxml) Xf1 


"riew Claco FilIle ST te /view 
. <View Class='demo—box'> 
<view class='title'> 网 像 变 形 </view> 
<Canvas Canvas-Id='myCanvas' style='border:lrpx solid'></ 


1 
2 
过 
= 
二 <button 七 YPe= - PI1Imary ”SILZze== "mini’ bindtap='trans1ate"> 移 : 
6 <button type='pPIrimary' SizZe= "mini’ bindtap=7Fotate > 旋转 </ 
3 <button type='primary" size~=‘'mini" bindtap="scale' > 缩放 < /At 
8 <button 七 YPe= PITIImary Size©= mlInl- binadtap='transform'7> 丰 | 
2 加 <button bindtap='drawBox'> 还 原 </button> 

10.</view> 


WXSS (pages/demo07/transfornmytransform .wxss) 文件 代码 如 下 : 


1. buttont 
2 margin: lO0rpx; 
Se : 


14. // 旋 转 

1l5. rotate: function() 1 

16. this.ctx.rotate (20*#Math.PI/180) 
天 this.drawBoxt() 

8.. $s 

19. /7/ 缩 放 

20- scale: function() 1 

2 this.ctx.scale (0 .3,0 .5) 

汪汪 this.drawBoxt{) 

23. 1} 


24. // 矩 阵 变 形 


25. transform: functiont() 1 


26. this.ctx.transftform(l.25, 20 * Math.PE fF TT80.0,0.5,50.,30] 
2 this.drawBoxt() 

8. 上 

29. onLoad: functionl(options) 1{ 

30. this.ctx=wx.createCanvasContext ('myCanvas') / /创建 画布 上 
区 this.drawBox() 

32. Fy 

33- 上) 


运行 效果 如 图 11-35 所 示 。 

【代码 说 明了】 

本 示例 在 transform.wxml 中 包含 了 4 个 <button> 枯 你 按钮 分 别 用 于 旺 : 
转 、 纺 放 和 和 窍 阵 变形 效果 , 对 应 的 目 定义 图 数 分 别 是 translateO 、rotateO 、sca 
还 包含 了 一 个 <button> 普 角 按 钮 用 于 还 原初 始 图 形 ， 对 应 的 目 定义 医 
transform.js 中 首先 定义 drawBox0 方 法 用 于 绘制 基本 图 形 一 一 一 个 左上 角 : 
均 为 150 像 系 的 浅 绿 色 实 心虚 形 ， 然 后 定义 translateO 方 法 用 于 将 矩形 往 硬 
系 的 距离 ; 定义 rotate0 方 法 用 于 将 矩形 旋转 20?; 定义 scale0 方 法 用 于 将 
新 为 原来 的 一 半 ; 定义 transform() 方 法 将 窍 形 的 额度 更 新 为 原来 的 1.25 倍 . 
的 一 半 ， 倾 冬 20°? 且 往 右 和 下 均 仿 移 50 像 系 的 距离 。 
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保本 DEMO 时 mE DENMO 
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7. 经 图 7. 绘图 7 


图 像 变 形 图 像 变形 图 僧 
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l1202 100% lees)' Wethat 地 了 志和 也 Wechat 3 1: 

nEO si 例 王 DEMGO 怀 有 a 

第 11 章 界面 API 第 11 章 界面 API 第 11 章 | 
7. 给 图 7. 绘图 7 

图 像 变形 图 像 变 形 图 伪 

还 原 还 原 这 

扬 微 坟 小 程序 开发 地 基础 入 门 局 微 信 小 程序 开发 零 基础 入 门 太 微 信 小 程序 : 
(d) 缩放 效果 (e) 矩阵 变形 效果 (f) 还 


图 11-35 〈( 续 ) 


企图 11-35 中 ,图 (a) 为 页 面 初 始 效 末 : 图 (b) 一 (e) 分 别 征 单 击 “ 
放 ” 和 “下 阵 变形 ”按钮 后 的 效 朱 ; 图 〈 有 定单 击 “ 还 原 ” 按 钮 后 的 效 末 
园 图像 的 剪 栽 
在 小 程序 中 可 以 使 用 cipO0 方 法 对 图 形 进行 看 裁 处 理 。 访 方法 一 旦 执行 
代码 将 起 到 甬 裁 画布 的 作用 ， 超 过 该 图 形 所 罗兰 部 分 的 其 他 区 域 都 将 无 法 : 
例如 : 
.，// 创 建 剪裁 的 区 域 
- Ctx.rect (0,0.,100,100). 
/7 前 裁 男 布 


Ct 


2 


上 述 代码 表示 将 画布 允 裁 为 左上 角 在 原点 、 冤 和 融 均 为 100 像 双 的 窍 ; 
的 ， 下 一 次 使 用 clip0 方 法 也 只 能 在 当前 的 保留 区 域 继 续 进 行 交 裁 。 
如 果 需 要 的 甬 裁 区 域 为 圆 形 ， 可 以 使 用 ctx.arc0 方 法 。 例 如 : 


本 ,FT Hl Hh 


下 


I 下] 总 


© 


4 


<View Class='demo-box'> 
<View class='title'> 图 像 关 裁 </view> 
<canvas canvas-id='myCanvas'" style='border:lrpx solid'></ 
<button type="'pPIrimary' pbindtap='clip'> 开 始 驰 裁 </button> 
<button bindtap='drawImage'> 还 原 </button> 


</view> 


JS (pages/demo07/clipyclip.js) 文件 代码 如 下 : 


Page ({ 


// 纵 制图 像 


drawlImage: function() 1 


}, 


]et 


Et 
ee 


ctx=this.ctx 
drawImage ('/images/demo07/icon.jpg', S50O, 50) 
draw() 


function() I 
这 二 二 本 六 区 


. Savel() 

. beginpPpath  () 

Arc{(lo0, 150, 100, 0 2 # Math. PI} 

十 王 全 和 ] 

.drawImage ('/images/demo07/icon.jpg', S50, 50) 
. drawt() 

.Testorel) 


onLoad: functionl(loptions) 1{ 
this .CtX=wX .CreateCcanvasContext (ImvCanvas') / /创建 画布 上 下 - 
this.arawImade () 


} 


- }) 


运行 效果 如 图 11-36 所 示 。 


重重 重量 量 What 全 17:18 1003% [| 重量 曾 重重 eC hat 1718 
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7. 给 图 7. 给 图 
图 像 剖 裁 图 像 竟 裁 
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【代码 说 明 】 

本 示例 在 clip.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 剪裁 和 还 原 ， 
分 别 是 clipO0 和 drawImage()。 在 clipjjs 中 育 先 定义 drawlImage( 方 法 用 于 给 i 
系 材 〈/images/demo07/icon.jpg)， 将 其 左上 角 绘 制 到 画布 坐标 (30.50) 的 位 j】 
方法 0 将 画布 叉 裁 为 圆心 在 (150,150)、 半 笃 为 100 像 系 的 圆 形 。 

在 图 11-36 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 草 裁 后 的 效果 ，| 
形 的 图 片 伞 筋 裁 为 圆 形 。 


11.7.9 图 像 的 导出 
小 程序 使 用 wx.canvasToTempFilePath(OBJECT, this) 把 当前 画布 指定 | 
成 指定 大 小 的 图 乒 ， 并 返回 文件 路 径 。 其 参数 如 表 11-31 所 示 。 


表 11-31 wx.canvasToTempFilePath(OBJECTthis) 的 参数 


允 区 说 二 
画布 的 文 轴 起 点 《默认 为 0) 
而 布 的 立轴 起 点 《中兴 为 0) 


Dj 


I 


width 否 国 布 宽度 〈 黑 认为 canvas 宽度 ) 
height 个 国 布 高 度 〈 默 认为 canvas 局 度 ) 


I 


destWidth 输出 图 片 宽度 〔 默 认为 width * 屏 幕 像素 密 民 
destHeight 输出 图 片 蜗 有 度 〈( 上 默认 为 height * 屏 大 像 率 密 上 
canvasId ‘sting | 是 男 布 标识 ， 传 入 <canvas> 有 canvas-id 

fileType 目标 文件 的 类 型 ， 只 支持 jpg 或 png'， 默 认 ; 


图 片 的 奈 量 ， 取 值 沁 围 为 (0, 1]， 不 在 沁 围 『 


I 


并 


I 


I 


quality Number 


成 1.0 处 理 
success() 接口 调用 成 功 的 回调 函数 
failO 否 接口 调用 失败 的 回调 函数 


4 


completeO) 接口 调用 结束 的 回调 图 数 (调用 成 功 与 否 


在 自 定 义 组 件 下 ， 第 二 个 参数 传 入 组 件 实 例 this， 
<canvas> 组 件 。 

【 例 11-2S】 再 面 API 之 图 像 寻 出 的 简单 应 用 

WXML (pages/demo07/preview/preview.wxml)》 文件 从 


了 


1。 <view class='title>7. 给 图 </view> 


TFET maocco—t AAcma FT < 


my - 


[oo 
广 [> 


(nn 


Var src~res.tempFilePath; 

// 预 帘 图 片 

wx.previewImage(l! 
CuUrrent- sre, / /当前 显示 图 片 的 http 链接 
urls: [src] // 裔 要 预 究 的 图 片 http 链接 列表 


}) 
} 
}, 
onLoad: function (optijons) 1 
/ /创建 画布 上 下 文 


Const ctx~wx.createCanvasContext ("myCanvas'") 
// 绘 制 窍 形 

ctx.setFillstyle(" lightagreen’') 

mi EliectEtTn, J Lo .L530 

ctx.drawt() 


} 


- }) 


运行 效果 如 图 11-37 所 示 。 
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例 匣 DEMO 


第 11 章 界面 API 
7. 绘图 


绘制 线段 


:本 微 信 小 程序 开发 零 基础 入 门 起 y 


后 使 用 wx.previewImage0 〇 方法 预 多 图 厂 。 
在 图 11-37 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 图 片 预览 效果 ， | 
经 成 功 导出 成 图 片 。 


O011.8 下 拉 届 新 


11.8.1 监听 下 拉 刷 新 

小 程序 在 Page0 中 定义 onPullDownRefreshO 男 数 用 于 监听 当前 页 [ 
事件 。 

onPullDownRefreshO 函 数 的 示例 代码 如 下 : 


1 Padgetl 

onPullDownRefresh: function()t 

二 console.1og(' 正 在 下 拉 刷 新 " ) 

4. } 

3. 1) 

测试 的 时 候 可 以 在 微 信 开 肥 者 工具 的 JSON 文件 中 进行 配置 ， 相 关 代 


{ 


"enablePullDownRefresh": 七 TUE 


HL lo 请 


} 
上 述 代 码 可 以 放 在 appjson 文件 中 表示 所 有 上 页面 都 允许 下 拉 刷 新 ， 也 | 
页 面 的 pagejson 文件 中 表示 只 有 该 页 面 多 许 下 拉 刷 新 。 


11.8.2 ”开始 下 拉 刷 新 


小 程序 使 用 wx.startPullDownRefresh(OBJECT) 触 发 下 拉 刷 新 动画 ， 效 : 
刷新 一 致 。 该 接口 从 基础 库 1.5.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 
其 OBJECT 参数 说 明 如 表 11-32 所 示 。 


表 11-32 ”WwWx.startPullIDownRefresh(OBJECT) 的 参数 


1 ss 


11.8.3 ”何止 下 拉 刷 新 


小 程序 使 用 wx.stopPullDownRefreshO 人 停止 当 前 页 面 的 下 拉 刷 新 。 
wX.stopPullDownRefreshO 示 例 代 码 如 下 : 


Page ({ 
onPullDownRefresh: function({()i1 
wxXx.StopPullDownRefresh{() 
J 


nn 


}) 


上 述 代码 表示 ， 当 onPullDownRefreshO 昨 听 并 处 理 完 数据 后 可 以 使 用 : 
新 动作 。 

【 例 11-26】 界面 API 之 下 拉 刷 新 的 简单 应 用 

WXML (pages/demo08/pullDown/pullDown.wxml) 文件 代 公 如 下 : 


1. <view class="title'>8 .下拉 刷新 </wiew> 

2. <View Class="'demo—box'> 

3 <view class='title'> 模 拟 下 拉 刷 新 </view> 

4. <button type="'primary' bindtap='startPullDown'> 开 始 下 拉 </h 
i <button type='primary' pbindtap='stopPullDown'> 售 止 下 拉 </bui 
6. </view> 


JS (pages/demo08/pullDown/pullDown.js〉 文 件 代 人 友 如 下 : 


Page (ll 
/ /开始 下 拉 刷 新 
startPullDown:function(})t 
wix.StartPullDownReftreshti1 
success: function(res) I 
Console.l1og (res.errMsg) 
} 
}) 
} ， 
// 停 止 下 拉 刷 新 


stopPullDown: function() I 


己 记 
OO.， 


wxX.SsStopPullDownRefresh'() 
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模拟 下 拉 刷 新 第 11 章 界面 API 
开始 下 拉 8. 下 拉 刷 新 
停止 下 拉 模拟 下 拉 刷 新 
@ 微 信 小 程序 开发 零 基础 入 门 开始 下 拉 
停止 下 拉 
@ 微 信 小 程序 开发 零 基础 入 门 
(a) 页 面 初 始 效果 (b) 下 拉 状 态 


图 11-38 下 拉 刷 新 的 简单 应 用 
在 图 11-38 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 单 击 “ 开 始 下 拉 
下 拉 页 面 的 效果 ， 当 前 由 于 没有 在 下 拉 后 进行 网 络 请 求 等 事务 处 理 动作 ，| 
内 自动 弹 回 。 开 发 者 可 以 根据 实际 需要 自行 妃 加 数据 获取 等 功能 。 


“3 国 
a 


综合 设计 应 用 实例 一 一 
小 程序 


在 学 习 了 小 程序 的 基础 知识 和 各 类 API 以 后 ， 不 护符 试 独立 动手 创建 
ieee SO Se FO SH A ED oa 


e 综合 应 用 所 学 知识 创建 完整 新 闻 小 程 友 项 目 ; 
e 能 够 在 开发 过 程 中 熟练 学 握 真 机 预览 、 调 试 每 操作 。 


本 项 目 一 共 需 要 3 个 页 面 ， 即 首页 、 新 闻 页 和 个 人 中 心 页 ， 其 中 首页 ; 
以 tabBar 的 形式 展示 ， 可 以 单 击 tab 图 标 互 相 切 换 。 

[可 首页 的 功能 需求 

首页 的 功能 需求 如 下 : 

。 首页 需要 包含 约 灯 所 播放 效果 和 新 闻 列 表 ; 

。 约 灯 片 至 少 要 有 3 幅 图 片 自动 播放 ; 

。 新 闻 列 表单 击 可 以 打开 阅读 新 闻 全 文 。 

团 新 闻 页 的 功能 需求 

新 闻 由 的 功能 需求 如 下 ; 


El PP ea 下 可 | 
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12.2.1 项 目的 创建 
本 项 目的 创建 选择 空白 文件 夹 chapter12, 填 入 AppID 和 自 定义 项 目 名 


所 小 程序 项 目 管理 


小 程序 项 目 
编 相 、 调 泛 小 程序 
项 目 目录 


AppID wx19079110a0f01e8a 
车 无 Appid 可 注册 或 体验 : 小 程序 /小 游戏 


项 目 名 称 chapter1 引 
(O) 建立 普通 快速 启动 模板 


取消 匀 先 


图 12-1 小 程序 项 目 填 与 示意 图 


注意 请 取消 勺 选 “ 建 立 普 通 快速 局 动 模板 ”选项 ， 以 免 自 动 生 成 代码 | 
早 击 “确定 ”按钮 后 ， 系 统 会 目 动 生成 项 目 配 置 文 件 project.config.json 


a 


{} project.config.json 


图 12-2 ”自动 生成 项 目 配置 文件 project.config.json 
此 时 在 Console“〈 控 制 侣 ) 有 报 负担 示 ， 如 图 12-3 所 示 。 


[K Console Sources Network Security Audits Storage AppData Wxm|l Se 


名 | top Y | Filter Default levels ™ 


HY 第 12 章 综合 设计 应 用 实例 一 


择 JSON 选项 新 建文 件 〈 如 图 12-4 所 示 )， 录 入 文件 名 然后 按 回 车 键 。 
在 appJjson 文件 中 输入 一 对 个 付 写 ， 人 然后 按 Ctrl+Ss 快捷 键 进行 体 仓 ，: 
-= 有 + 
口 目录 
1 Page 
1 Component appjson x 
四 1 也 
0 0 ~ 
ep MR 选择 JSON 文 件 
wss \WXSS 
wxs WXS 
图 12-4 新建 JSON 文件 12-5 app.json 文件 的 初始 


此 时 Console《 控 制 台 ) 仍 有 报 铬 ， 这 和 古 由 于 app.json 中 还 没有 进行 贝 


党 ， 稍 后 创建 页 面 文件 时 系统 会 目 动 更 新 app.json 的 代码 。 


二 


文件 保持 空 日 ) 


然后 用 同样 的 方法 新 建 app.js 和 app.wxss 文件 ， 这 两 


部 完成 后 的 目录 结构 如 图 12-6 所 示 。 


创建 页 面 文件 
在 应 用 文件 创建 完毕 后 需要 继续 创建 页 面 文件 ， 页 面 文件 一 般 来 说 会 : 


件 夹 中 ， 每 个 页 面 有 目 己 独立 的 二 级 日 录 ， 里 面包 偏 wxml、wxss、]js 和 js 


同 梓 单 击 左 上 角 有 的 + 写 按 钮 ， 迁 择 “ 目 隶 ” 迁 项 狐 建 文件 来 ， 他 名 为 Pp 


键 完成 创建 ， 如 图 12-7 所 示 。 


十 站 


| Page 


| Component 


5 JS 


HE Ue {} JSON 


I5 app.js <> WXML 


:中 微 信 小 程序 开发 零 基 础 入 门 2? 


+ 以 


b OD page* 
apf ” 硬 硬 打开 
(} apf 重病 名 


“= apt 


{} pro 删除 


查找 


es Page 
| Component 


新 建 二 级 目录 


图 12-8 新 建 二 级 目录 


十 了 
” 加 pages 
bk DO index 
”年 硬盘 打开 
{} af 
重合 名 


Wx55 滞 | 


{ Er 


Eg 


p> ] Component 


新 建 全 套 页 面 文件 * 


{} JSON 


<> \WXML 


ws WASS 


Ws WXS 


十 


DI 


v [DS pages 
bp index 


I5 app.js 
{} app.json 


wss app.WX3S 


{} project.config.json 


十 


图 12-9 应 用 文件 创建 和 


接 看 石 击 index 目录， 选择 “新 建 ” 一 Page， 输 入 index 并 按 回 车 键 即 1 
index 页 面 所 需 的 wxzml、wxss、js 和 json 几 个 同名 文件 ， 如 图 12-10 所 示 。 
用 同样 的 方法 创建 my 和 detail 页 面 ， 全 部 完成 后 的 目录 结构 如 图 12- 


全 


. GS pages 
v [SS index 


I5 index.js 
{} index.json 
<> INdex.wxml 


wxss INdex.Wxss 


TS my 


I 
ail el 


Ss app-js 


JS my.js 
{} my.json 
<> My.wxml 


wxss MY.WXSS 


{} app.json 


wxss app.Wxss 


{} project.config.json 
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创建 其 他 文件 

接 下 来 创建 其 他 自 定 义 文件 ， 本 项 目 还 需要 以 下 两 个 文件 夹 。 

e images: 用 于 存放 图 片 系 材 。 

e utils: 用 于 存放 公共 JS 文件 。 

文件 夹 的 名 称 由 开发 者 自 定义 ， 创 建 方式 与 pages 文件 夹 的 创建 方式 5 
1) 添加 图 片 文 件 

本 项 目 将 在 tabBar 栏 中 用 到 两 组 图 标 文件 ， 图 标 素材 如 图 12-13 所 示 


省 会 /。 


(a) Index.png (b) i (c) my.png 
12-13 图标 素材 展示 
对 目录 结构 中 的 Images 文件 夹 右 击 ， 选 择 “ 价 盘 打 开 ”， 将 图 片 复 制 | 半 
2) 创建 公共 JS 文件 
在 utils 文件 来 上 右 击 ， 选 择 “ 新 建 ” 一 JS， 输 入 common 并 按 回 车 刍 


件 common.js， 如 图 12-14 所 示 。 


全 部 完成 后 的 目录 结构 如 图 12-15 所 示 。 


下 必 


后 images 
回 index-png 
加 index blue.png 
my.png 


四 my_blue .png 
" SS pages 
2 a detail 
kD images detall.js 


{} detalljsaon 
< > detailwxml 
wes detall.wxss 
- 加 index 
index,js 
{1} lIndex.json 
<> Index. wxml 
ws index Wass 
” [my 
Page my.js 


”品目 录 


{} myjson 


Component 


< > mWXImil 


sj 中 微 信 小 程序 开发 稚 基 础 入 门 避 8 


重新 配置 来 自 定义 村 航 柱 效果 。 更 新 后 的 appjjson 文件 代码 如 下 : 


Dj 


7 

a Pages , [ls 

3 "Window™: 1 

4. "navigationBarBackgroundColor™.: "#328eeb", 
Es "navigationBarTitleText™: "我 的 新 闻 了 网 "， 

6 。 "navigationBarTextSstyle™: "white"™ 

1. } 

0. 1 


上 述 代 码 可 以 更 改 导 航 栏 背景 色 为 蓝 色 、 字 体 为 白色 ， 效 果 如 图 12-1 


sesse eChat 全 


12-16 目 定 义 导 航 栏 效果 


tabBar 设计 
首先 在 app.json 中 追加 tarBar 的 相关 属性 代码 ， 更 新 后 的 app.json 文人 


{ 
"pages": |...], 
"Window : {..},， 
"tabpBar™: { 
"omnlor ss “#000"™. 
"selectedColor™.: "#328eeb", 
和 
{ 
"pagePath": "pages/index/index", 
"IconPath": "images/index.png", 
"selectedIconPath": "images/index blue.png", 
i 


"pagePath": "pages/my/my", 
"iconPath": "images/my.png", 
"SselectedIconpPath™: "images/my blue.png", 


"text": "我 的 " 


| 一 


-| -幻灯 片 滚动 --> 


{HY 第 12 章 综合 设计 应 用 实例 一 


人 j 灯 片 滚动 效果 部 分 


新 闻 列 表 


商 


图 12-18 ”首页 设计 图 


计划 使 用 的 组 件 如 下 。 

e 么 ] 灯 片 深 动 效 果 部 分 : <swiper> 组 件 。 

。 新 闻 列 表 : <view> 容 器 ， 内 部 使 用 数组 循环 。 
WXMI (pages/index/index.wxml) 代 个 如 下 : 


<! 一 -幻灯 片 滚动 --> 


- <SwWiper lindicator—dots="true” autoplay="true™” interval="o000™ te 


</swiper> 


.<1-- 新 闻 列 表 --> 
.<Vview idq='news-1ist'> 这 是 新 闻 列 表 </view> 


接着 为 组 件 添加 wx:for 属性 循环 显示 约 灯 片 内 容 和 新 闻 列 表 数 据 。 
修改 后 的 WXML (pages/index/index.wxml) 代码 如 下 : 


| 


3 涪 。 微 信 小 程序 开发 零 基础 入 门 


下 


相关 WXSS (pages/index/index.wxss) 代码 片段 如 下 : 


. /*swiper 区 域 样式 */ 
-HA41 1 swiper 组 性 */ 
- Swiper 1 


height: A400rpx; 
} 


。 /+1-2 swiper 中 的 图 片 #/ 


. SWiper jmage 1 


width: 100%» 
height: 100%; 


本 
. /+ 新 闻 列 表 区 域 样式 *y/ 
.Vs#2-1 新 闻 列 表 容 右 #/ 


.#news—list { 


min—height: 600rpx; 
Padding: lorpx;? 


= 二 
. /*2 一 2 列表 项 目 */ 


--. 11st— -itemt 


displav: flexs 
flex—direction: TOW; 


border-—bottom: lrpx Solid gray: 


= 
.V/*2-3 新 闻 图 片 */ 


3 二 下 ET 站 


width:230rpx; 
height: lo0rpx; 
margin: lOrpx; 


= 
./*+2-4 新 闻 标 题 */ 


-. .News—t1itlelt 


width: 100%; 
displavy: block; 
Tine~—height: oDrpxs 
font—size: 二 Op; 


为 了 进行 布局 和 样式 效果 的 预 
相关 JS (pages/index/index.js) 代码 片段 如 下 : 


- Paget 


data: I 
F 7 EL 十 十 


还 需要 在 JS 文件 的 data 中 临时 孙 / 


HY 第 12 章 综合 设计 应 用 实例 一 


当前 效果 如 图 12-19 所 示 。 

由 图 12-19 可 见 ， 此 时 可 以 显示 幻灯 片 播 放 和 一 条 临时 新 闻 。 由 于 尚 ; 
所 以 彰 时 无 法 显示 完整 新 闻 列 表 ， 仅 供 样 式 参考 。 

2) 新 闻 页 设计 

新 闻 页 征用 于 给 用 户 浏 贞 新 闻 全 文 的 ， 需 要 用 户 音 击 首 页 的 新 闻 列 表 
打开 充 页 面 。 新 闻 页 包括 新 闻 标 题 、 新 闻 图 片 、 新 闻 正 文 和 新 闻 日 期 ， 页 
所 示 。 


生硬 生硬 间 NChat 全 11:56 
我 的 新 闻 网 
新 闻 标 题 
新 闻 图 捕 
俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 

记 顾 家 山 一 行 并 接受 《 力 网 译 区 全集》 赠 予 

一 一 2018-03-05 
新 闻 正 文 


新 闻 日 期 


图 12-19 ”首页 效果 图 图 12-20 ”新 闻 页 设计 度 


由 于 暂时 没有 做 单 击 跳 转 的 逻辑 设计 ， 所 以 可 以 临时 修改 app.json 文 
的 页 面 路 径 顺 序 ， 将 detail 页 面 路 径 移 动 到 第 1 行 ， 代 码 如 下 : 
| 


Pages : | 
3 "pages/detail/detail", 


6] 微 信 小 程序 开发 零 基础 入 门 


i 


tO 下] 总 


Be de I esos hey ew ME le I | i 


e add date: 新 闻 日 期 区 域 。 


WXMIL (pages/detail/detall.wxml) 代码 如 下 : 


<V1IEeEwWw Class="'container'y> 


-wiew Class= "title [article, Eitliell}l< /view 


<View Class="'poster'> 


<image src='{{article.poster}}'"' mode='widthFix'></image: 


</view> 


<view Class='content'>{{article.content}}</view> 
<View class="'add date' > 时 间 : {{article.add date}}</view> 


</view> 


WXSS (pages/detail/detail.wxss〉 代码 如 下 : 


/* 整 体 容器 */ 
-Containert 
Padding: lorpx; 
EemnkE lgns: Centers 
} 
/* 新 闻 标 题 */ 
ETEEed 
font—size: lA4pt; 
line—height: 80rpx; 


- 】 
- /* 新 闻 图 万 */ 


- -PoOSter Image1{ 


width: 100%; 


- 】 
. /* 新 闻 正 文 */ 


. .ConNntentl 


text—align: left; 
font—size: 1l2ptry 
Tine heigqht: 0rpxs 


a 
. /+ 新 闻 日 期 */ 
- -add datel 


font—size: lzpts 
text—align: Tight: 
line—height: 30rpx; 


margin riIght: Zorpx» 


margin—top: 20rpxs 


为 了 进行 布局 和 样式 效果 的 预览 ， 


和 


11\ 


需要 在 JS 文件 的 data 中 临时 录 > 


闻 第 12 章 综合 设计 应 用 实例 一 


当前 效果 如 图 12-21 所 示 。 

由 图 12-21 可 见 ， 此 时 可 以 显示 完整 样式 效果 。 由 于 尚未 获得 新 闻 数 : 
根据 用 户 单 击 的 新 闻 标 题 入 口 显 示 对 应 的 新 闻 内 容 ， 仅 供 样 式 参 考 。 

3) 个 人 中 心 页 设计 

个 人 中 心 页 主要 包含 两 个 版 块 ， 即 登录 面板 和 我 的 收藏 。 登 录 面 板 用 : 
头像 和 了 昵称,“ 我 的 收藏 ”用 于 显示 收藏 在 本 地 的 新 闻 列 表 。 页 面 设 计 如 民 


重生 生硬 VN at 全 


俄罗斯 联邦 驻 华 大 使 杰 尼 认 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 风 译文 全 集 》 赠 了 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
杰 尼 察 夫 在 北京 俄罗斯 驻 华 大 使 筷 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 区 尔 、 大 使 助理 、 塔 斯 
社 记者 ， 我 校 校 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友谊 勋章 和 利 哈 乔 
去 院士 奖 获 得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 允 
飞 教授 等 参加 了 会 见 。 


我 的 收藏 


了 时间 : 2018-03-05 


图 12-21 新闻 页 效果 图 图 12-22 个 人 中 心 页 设 i 


计划 使 用 <view> 组 件 进行 整体 布局 ， 目 定义 id 名 称 如 下 。 
。myLogin: 登录 面板 。 

e。 myIcon: 微 信 头 像 图 片 。 

nickName: 和 做 信 上 昵称。 

e myFavorites: 我 的 收藏 。 

WXML (pages/my/my.wxml) 代码 如 下 : 


sj” 微 信 小 程序 开发 零 基础 入 门 


8. <!-- 我 的 收藏 --> 

9. <view id="'myFavorites'> 

10. <text> 我 的 收藏 (1)</text> 

11. <!--- 收 藏 的 新 闻 列 表 --> 

12. <Vview id='news—l11ist"> 

| Rs <VviewcCclass="1ist item' wx:for="{{newsListi}}” wx: for litenm 
"{{news.1idili}"> 

4 <image src='{{news.poster}}'></image> 

I <text class='news-—title'>QO{{news.title}}———{{news.add 

1 二 </view> 

Te ew 

18.</view> 

WXSS (pages/my/my.wxss) 代码 如 下 : 

1 . /* 登 录 思 板 */ 

2. #myLogint{ 

二 background-color: #328eeb; 

4. height: 400rpx; 

和 displav: Flexs 

6. flex—direction: Column; 

2 align—items: center; 

8. Justify—content: space—around; 

Bat 

10./*1-1 头像 图 片 */ 

11.#myIcont 

12 width: 200rpxs 

] 3 height: 200rpx; 

1 4 border—radius: 20%; 

Te 

16./*1-2 微 信 昵 称 */ 

17.#nickNamel! 

18 color: white,; 

1 

20./#* 我 的 收藏 */ 

21.#myFavorites!{ 

2 Padding: 20rpx; 

之 了 } 


由 于 新 闻 列 表 的 样 陈 与 衣 页 的 完全 相同 ， 没 有 必要 重复 样 坏人 代码 闪 


index.wxss 中 新 闻 列 表 样 式 的 相关 代码 挪 到 app.wxss 中 使 用 。 


app.Wxss 的 代码 如 下 : 


16. 
| We a 


18 
19 
20 
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height: lo0rpx; 
margin: lO0Orpx; 


本 
.V/*2-4 新 闻 标 题 */ 


- .News—t1itlel 


-a 国 四 
Po 
过 
二 4 


2 


width: 100%; 
displavy: block; 
line—height: 60rpx; 
Font saes UB 


为 了 进行 布局 和 样式 效果 的 预 蜗 ， 还 需要 在 JS 文件 的 data 中 临时 录 2 
JS (pages/my/myjs) 代码 片段 如 下 : 


二 二 Page (ll 

< data: { 

3 /7 临时 微 信用 户 上 昵称 和 头像 

是 二 nickName:'" 未 登录 ee 

过 src:'/images/index.png', 

6. / /上 临时 收藏 夹 新 闻 数 据 

F newsList: [1 

83. ds: "2Z04098”., 

9 . title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 觉 委 书 记 顾 家 山 一 行 并 接受 《 力 内 
10. poster: "http://www.ahnu.edu.cn/uploads/20180305/2018030513C 
Lu add dates “2018 03 03 

Lz 上 

1 3 

1 -1 


当前 效果 如 图 12-23 所 示 。 


我 的 收藏 (1) 
咱 “ 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 


委 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 


6] 微 信 小 程序 开发 零 基础 入 门 


地 的 缓存 数 据 ， 所 以 暂时 无 法 显示 实际 内 容 ， 仅 供 样 式 参 考 。 
此 时 页 面 布局 与 样式 设计 已 经 完成 ，12.2.4 贡 将 介绍 如 何 进行 逻辑 处 


12.2.4” 远 辑 实现 


公共 远 辑 

下 第 来 说 数据 应 该 由 网 站 群 害 理 平台 提供 新 闻 接 口 ， 由 于 隐私 安全 、， 
一 系列 回 题 ， 这 里 米 用 模拟 数据 进行 代 耕 。 有 人 条件 的 开 及 者 可 以 使 用 第 三 
接口 (例如 有 聚合 数据 等 ;， 或 自行 搭建 服务 器 提供 接口 。 

假设 已 经 著 取 a 到 了 数据 ， 将 其 放 在 公共 JS 文件 (utils/common.js)〉 中 ， 


1 。 const news=|[{ 

过 了 0 "264698", 

3 title: " 俄 多 斯 联邦 驻 华 大 使 杰 尼 寺 夫 会 见 校 党 委 书 记 顾 家 山 一 行 并 接受 《 力 四 详 叉 
4 Poster: 'http://www.ahnu.edu.cn/uploads/20180305/201803051307: 
5. ”content: ' 本 网 讯 〈 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 杰 尼 索 夫 节 
使 官 会见 了 校 党 委 书 记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 耶 俄罗斯 大 使 馆 的 十 苦 《 力 办 
驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芯 尔 、 大 使 助理 、 塔 斯 社 记者 ， 我 校 校 基 
性 社 长 张 奇 才 ， 我 校 杰 出 校友 、 俄 多 斯 人 民 友 语 勋 章 和 利 哈 乔 夫 院士 炎 获 得 痢 、 中 于 
会 长 刘 文 飞 教授 等 参加 了 会 见 。“， 

6. add date: "2018-03-09" 

d= 1 

0. 4 

> 30d: T304083". 

10. title: ' 我 校 学 子 代表 国家 队 获 中 国 羽毛 球 公 开赛 男 双 亚 军 '， 

11. poster: http://ww.ahnu.edu.cn/uploads/20181114/20181114090202 4 
12. content: '， 本 网 讯 (体育 学 院 徐 梦 涛 ) 11 月 11 日 ， 世 界 羽 联 中 国 羽毛 二 
帷 磋 。 在 男子 双打 半 决 赛 中 ,我 校 2018 级 运动 训练 专业 学 生 谭 强 与 搭档 何 济 霆 以 2 
哈 末 。 阿 山 / 于 德 拉 ， 普 级 决赛 。 决 袍 中 ， 这 对 年 轻 组 合 以 1 : 2 人 负 于 现世 界 排名 第 一 
了 本 座 比 费 的 亚 车 。 这 也 坪 谭 强 在 本 年 度 内 获得 的 最 好 成 绩 。 ， 

3 “dd viates 20018 EL 14> 

14.}, 

1 

Lo 1 “SUopiTd 

17. title: ' 我 校 学 子 在 全 省 第 八 届 少 数 民族 传统 体育 运动 会 上 豆 获 佳绩 '， 

18. Poster: ‘http://www.ahnu.edu.cn/uploads/20181127/201811270613] 
19. content: ' 本 网 讯 (体育 学 院 邹 华 刚 ) 11 月 18 日 至 23 日， 由 安徽 省 人 民 
省 体育 局 和 蚌 塌 市 人 民政 府 承 办 的 安徽 省 第 八 届 少 数 民族 传统 体育 运动 会 在 蚌 塌 市 成 


ll, = fs CE FT ,一 | 十 严 一 一 sh rl EH mw Do 得 一 i + 


第 12 章 综合 设计 应 用 实例 一 


2. function getNewsList()} 1 

洒 Ia F415 

习 for {var 1=0; li<news.length; 1i++) 1{ 
3 let ob]j={}; 

c ob] .id=news[1i|].1id; 

1 ob] .poster~news|[i] .poster; 

8 obj -add date=~news[i] .add date; 


= 了 ob] .title=news [1i| .title; 

10. 1i1st,. Push (obl}s 

EB 

12. return list; // 返 回 新 闻 列 表 
二 

14. 

15.// 获 取 新 闻 内 容 


le6e.function getNewsDetail (news1ID) { 
li. let msg=1| 


18. code: '404', / /没有 对 应 的 新 闻 
| Bs News: 1} 

2 4s 

21s or {var 1i=0r 1T<newselengths 工 +H 1{ 

2 i (newsID==newSs|[il:id) 1 /7 匹配 新 闻 id 编号 
33 msog.code="200°"; / /成功 

2 msg.news=news [i];} /7 更 新 当前 新 闻 内 容 
2 break; 

2 } 

2 

28. return msg; / /返回 查找 结果 
| 


最 后 需要 在 common.js 中 使 用 module.exports 语句 又 露 图 数 出 口 ， 代 在 


- Module.exports={ 
JetNewsList: getNewsList, 
getNewsDetail: getNewsDetail 
} 


记 上 


至 此 完成 了 公共 逻辑 处 理 的 部 分 。 
然后 在 各 页 面 JS 文件 顶端 引用 公共 JS 文件 ， 引 用 代码 如 下 : 


Var common~reguire('../../utils/common.js") // 引 用 公共 Js 文件 


vy 十 痊 1X 围困 Hi 不 不 二 把 于 4 天 I 己 | 儿 ， 口 人 人 和 伟 用 相对 及 [ 


邱 7 让 ” 微 信 小 程序 开发 零 基础 入 门 志 y 


4. let list= common .getNewsL1ist() 
5. / /更 新 列表 数据 

6. this.setData({newsList:11st}) 
1. } 

8. 1}) 


此 时 页 和 面 效 采 如 图 12-24 所 示 。 


+ 俄 轨 断 联 邦 驻 华 大 使 本 尼 案 夫 会 见 校 完 委 书 
记 顾 家 山 一 行 并 计 受 《 力 冈 译文 全 梨 》 风 也 


———2018-04-05 


上 5 我 简 池 子 代 雪 国 车队 茧 申 国 羽 毛 王 少 开 讲 胃 


台 亚 军 一 一 2018-11-14 


2 我 以 池子 在 全 省 笠 儿 局 少 禾 民族 传 筑 体育 运 


SEE 
对 和 动 会 上 室 获 佳 绪 一 一 2018-11-27 


12-24 首页 新 闻 列 表 展 示 


2) 丫 击 跳 技 新 闻 内 容 

右 布 望 用 户 单 击 新 闻 标 题 即 可 实现 跳 苇 ， 需 要 驳 为 新 闻 列 表 项 目 添加 . 

相关 WXML (pages/index/index.wxml) 代码 卢 段 眉 改 如 下 : 
1.。<1!-- 新 闻 列 表 --> 


2. <View ld='news——l1ist'» 


二 <VIeWwWw Class="1ist- -item’' wx:for="{{newsList}}” wx:for litem 
“"{{news.1id}}"> 

4. <image src="'{{news.poster}}'></image> 

:人 <text class="'news-—title" bindtap="goToDetail’" data—id="i1 


{Inews.titletltit——{{news.add datetltli</text»> 


第 12 章 “综合 设计 应 用 实例 一 


8 . / /携带 新 闻 id 进行 页 面 跳 转 


ey wx.nNnavigateTor(l 

10: Url: '../detail/detail?id="+id 
下放 }) 

a 

1 


此 时 已 经 可 以 单 击 跳 转 到 detail 页 面 ， 并 且 成 功 携 带 了 新 闻 id 数据 ， 
页 面 进行 携带 数据 的 接受 处 理 方 可 显示 正确 的 新 闻 内 容 。 

新 闻 页 逻辑 

新 闻 页 主要 有 两 个 功能 需要 实现 ， 一 是 显示 对 应 新 闻 ， 二 是 添加 /取消 

1) 显示 对 应 新 闻 

在 首页 逻辑 中 已 经 实现 了 页 面 跳 转 并 携带 了 新 闻 id 编写， 现在 需要 在 
号 ， 并 查询 对 应 的 新 闻 内 容 。 

相关 JS (pages/detail/detailjs) 代码 请 段 如 下 : 


1. Page (il 

2 onLoad: function{(options) I 

3 et 1 ontions. Td /7 获取 页 面 跳 转 来 时 携 审 的 新 闻 1d 
Jet result=common.getNewsDetail (id) 

王 -。 / /获取 到 新 闻 内 容 

6. if (result .codeQ=="200")1 

Fi this.setData({article:result.newsl}) 

8 } 

人 二 } 

10.1) 


此 时 重新 从 首页 单 击 新 闻 跳 苇 束 可 以 有 友 现 已 经 能 够 正确 显示 标题 对 应 | 
运行 效果 如 图 12-25 所 示 。 


重重 当量 二 WN hat 


俄罗斯 联邦 驻 华 大 使 杰 居 京 夫 会 见 校 党 双 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 风 


有 候 轨 断 联 趣 驻 从 姑 使 木 尼 案 夫人 辣 见 以 党 委 书 
记 顾 家 山 一 行 并 税 受 《 力 冈 译文 全 集 》 赠 巴 SR cn 
本 网 讯 { 校 出 版 社 )》 3 月 2 日 上 千 ， 展 轩 斯 驻 华 - 


= 


en i A a eh ee 


村 习 。 微 信 小 程序 开发 零 基础 入 门 


2) 添加 /取消 新 闻 收 茂 

修改 detailLwxml 代码 ， 追 加 两 个 <button> 组 件 作 为 添加 /取消 收藏 新 | 
wx:1f 和 wx:else 属性 使 其 每 次 只 存在 一 个 。 

WXML (pages/detaildetailwxml) 代码 片段 添加 如 下 : 


. <View Class='container'> 
<view Class='title'>{{article.title}}</view> 
<ViewW Class='poster'> 

<image src="'{{article.poster}}' mode='widthFix'></image: 
</view> 
<WIeWw Class='content>{I1Iarticle.contentt}</view> 
<V1iEeEW class="'adqd date'"> 时 间 : {{article.adqd date}}</view> 
<button wx:1f=' {1{isAdd}}' plain bindtap='cancelFavorites'>Y 
. <button wx:else plain bindtap='addFavorites' >¥ 单 击 收 藏 < /bu 
0 .</view> 


对 应 的 WXSS (pages/detail/detail.wxss〉 代码 片段 添加 如 下 : 
/*“ 单 击 收藏 ” 按 钮 */ 


- buttont 

width: 200rpxs 
height: lO00rpx; 
margin: 20rpx auto; 


} 


人 


对 应 的 JS (pages/detaildetailjs) 中 onLoadO 函 数 的 代码 古 段 修 改 如 下 


下 onLoad: function(options) I 

2 a 

3 // 栓 得 当前 新 闻 是 否 在 收藏 严 中 

4. var article~=wx .getStorageSVvync (1d); 
5 A a 

6 i {article!l="") 1 

1 this.setDatal({ isAdd: true 1}) 
0 } 

9 . / /不 存在 

[EE else 1 

I I this.setData({ isAdd: false 1}) 
到 } 

13. 1}, 


继续 在 detailjs 文件 中 奶 加 addFavoritesO0 和 cancelFavoritesO 国 数 ， 用 了 


Pt | 


HY 第 12 章 综合 设计 应 用 实例 一 


现在 从 首页 开始 预览 ， 选 择 其 中 任意 一 篇 新 闻 进 入 detail 页 面 ， 并 堂 记 
此 时 页 面 效 果 如 图 12-26 所 示 。 


重重 要 重生 We hat 全 生生 要 要 二 What 全 


e \ < 


俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 予 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 
杰 尼 豪 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 杰 尼 之 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 
的 十 套 《 力 冈 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 迁 的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 区 尔 、 大 使 助理 、 增 斯 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 龙 尔 、 大 使 助理 、 
社 记者 ， 我 校 校 办 主任 曾 黎明 、 出 版 社 社 长 张 奇 社 记者 ， 我 校 核 办 主任 曾 黎明 、 出 版 社 社 长 张 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 这 勋章 和 利 哈 乔 才 ,我 校 杰 出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 
夫 院士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 夫 院 士 奖 获得 者 、 中 国 俄罗斯 叉 学 研究 会 会 长 
《教授 等 参加 了 会 见 。 飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 时 间 : 2018-0: 


v 已 收藏 | w 点 击 收藏 | 


(a) 已 经 收藏 新 闻 (b) 取消 收藏 新 闻 


[KK Console Sources Network Security Audits Storage AppData Wxml 


key Value 
264698 + Object: yo "264698" "tie" "HES A ED 


(c) 添加 本 地 缓存 
[K Console Sources Network Security Audits Storage AppData Wxml 


Key Value 


3 四 微 信 小 程序 开发 零 基 础 入 门人 


1. <view id="'myLogin'> 

<block wx:1if='{{isLogin}}'> 

入 <image id='myIcon' src='{{src}}'></image> 
= <text id='nickName'>{{nickName} }</text> 
二 </block> 

6. <button wx:else> 未 登录 ， 点 此 登录 </button> 

1. </view> 


此 时 页 和 面 效 末 如 图 12-27 所 示 。 


ITTT ES 


我 的 收藏 (1) 


咱 “俄罗斯 联邦 驻 华 大 使 杰 尼 案 夫 会 见 校 党 
委 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 
集 》 赠 予 一 一 2018-03-05 


12-27 个 人 中 心 未 登录 状态 效果 图 


在 my.wxml 页 面 中 修改 <button> 组 件 的 代码 ， 为 其 妃 加 绪 取 用 户 信 1 
如 下 : 


<button wxX:else open-—type='getUserlinfo" bindgetuserinfo=" 


2 未 登录 ， 扣 此 登录 


证 </button> 


{HY 第 12 章 综合 设计 应 用 实例 一 


[RK Console Sources Netwaork Secuyrity Audits Storage AppData Wxm|l Sense 


司 | top 了 | Filter Default levels ™ 


VY {nickName: "WB", gender: 2, Language: "zh _ CN" city: "Wuhu”, province: "An 
avatarUrl: "https://wx.qloeso.cn/mmopen/vi 32/Q8j4TwGTfTjer@sqPDflrMTdlVXBIGLbH 
city: "Wuhu”" 
country: "China”™ 
gender: 2 
language: "zh _cN" 
nickName:;“" 周 小 由 
province; "Anhui" 

b proto : Object 


图 12-28 ”Console 控制 台 输 出 内 容 


修改 myjs 文件 中 getMyInfo0 孙 数 的 代码， 将 信息 更 新 到 动态 数据 上 ， 
// 著 取 微 信 用户 信 和 忠 


getMyInfo: function(e) { 


人 七 jnfo=e.detalil .userIinfo,; 
this.setDatal(t 


isLogin:true, / /人 确认 登录 状态 
STE nfo.avatardrl. / /更 新 图 片 来 源 
nickName: info.nickName / /里 新 昵称 

3 }) 

eh 上 7 


生硬 名 间 名 Wet 站 本 [全 1352 TTTT 由/ 已 亿 上 本 让 “< 二 


我 的 新 闻 网 


我 的 收藏 (1) 我 的 收藏 (1) 

"俄罗斯 联邦 驻 华 大 使 杰 尼 案 夫 会 见 校 常 | : ° 司 罗斯 联邦 驻 华 大 司 杰 尼 索 去 会 见 校 并 
委 书 记 顾 家 山 一 行 并 接受 〈 力 网 译文 全 和 老 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 
集 》 赠 予 一 2018-03-05 华 》 赠 耶 一 -2018-03-05 


5 人 微 信 小 程序 开发 零 基础 入 门 
对 YHJ JS (pages/detail/detailljs〉 中 data 属性 的 代码 片段 修改 如 下 : 


Page (1 
data: I 


I 
™ 


继续 在 detailjs 文件 中 追加 getMyFavorites0 函 数 ， 用 于 展示 真正 的 新 i 
对 应 的 JS 〈pages/mymyjs) 代码 请 段 如 下 : 


1 .Page ({ 

2. // 绪 取 收 藏 列表 

过 getMyFavorites: function () 1 

4. let info=~=wx.getstorageInfoSync(); // 读 取 本 地 组 存 信息 
- let keys=info.keys; // 绪 取 全 部 key 信息 
6. let num=keys .length; /7 获取 收 蕊 新闻 数 量 
Fe 

8. 


1 et myList=|[|]; 


> for dvar 1=0r i<nums: i144 1 

10. let ob =wiX.getSstorageSync (keys [11)， 
攻 加 myList.push (obj); / /将 新 闻 添 加 到 数组 中 
于 过 } 

ls / /更新 收藏 列表 

14. this.setDatal(t 

I newsList: myList, 

16.. num: num 

工人 } ) 7 

1 

193.1}) 


最 后 修改 myjs 中 的 getMyImfo0 困 数 ， 为 其 退 加 关于 getMyFavorites() 
对 应 的 JS pages/mymyjs) 代码 片段 如 下 : 


Page (1{ 
/ /获取 微 信用 户 信 息 
getMyInfo: function(e) 1 
let info=e.detail.userintfo; 
this.setDatal(t 


isLodgin: true, // 人 确认 登录 状态 
src: info.avatarUri, // 昌 新 图 片 来 源 


人 


nickName: info.nickName 1/ /里 新 昵称 


{HY 第 12 章 综合 设计 应 用 实例 一 


我 的 收藏 (2) 


人 罗斯 联 卸 福 华 大 使 杰 尼 案 夫 会 见 校 党 
| 委 书 记 国 宜山 一 行 并 接 时 《4 力 四 译文 全 
入》 赠 子 一 一 2018-03-05 


“我 校 学 子 代表 国 京 队 茶 中 国 羽 毛 球 公 开 


窒 曙 骏 亚 至 一 一 2018-11-134 


图 12-30 ”我 的 收藏 列表 效果 


3) 浏 贤 收藏 的 新 闻 
单 击 浏览 已 经 收藏 的 新 闻 和 首页 的 单 击 跳 转 新 闻 内 容 功能 类 似 , 首先 人 
藏 列表 的 代 人 码 如 下 : 


1. <!-- 收 藏 的 新 闻 列 表 --> 
<VTIeW id='news—1ist'»> 
EF <VliewcCclass="1ist- -item’' wx:for="{ {newsList}}" wx: for -item 
"{{news.1d}}"> 
<ijmage src="'{{news.poster}}'></image> 
<text class="news-title" bindtap="goToDetail" data-lid= 
‘<>{[{news.title}} {{news.adqd date}} 
</text> 
</vVview> 


0 |] 
证 


具体 修改 为 第 5 行 加 粗 字 体 部 分 ,为 <text> 组 件 添加 了 自 定义 触摸 事件 
并 且 使 用 data-id 属性 携带 了 新 闻 id 编号 。 


eV 微 信 小 程序 开发 零 基 础 入 门 、 革 I 


重量 者 向 总 hat 二 


俄罗斯 联邦 驻 华 大 使 杰 尼 京 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 了 予 


我 的 收 赢 (2) 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 帕 加 斯 驻 华 大 使 
志 尼 索 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 筷 
的 十 套 《 力 同 译 艾 全 集 》 。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 姜 尔 、 太 司 助 理 、 塔 斯 
社 记 者 ， 我 校 术 共 主任 曾 黎 明 、 出 版 福 社 长 张 奇 
才 ， 我 核 杰 出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 
去 院士 奖 获得 者 、 中 国 俄罗斯 艾 学 研究 会 会 长 刘 父 
飞 教 授 等 参加 了 会 见 . 


靖 : 俄 军 斯 刁 招 驻 纺 大 性 杰 尼 案 去 会 见 壤 党 
| 委 考 记 膨 家山 一 行 共 搜 爱 + 力 辐 怪 广 全 
入 3 此 子 一 一 2018-03-05 


5 熏 这 学 于 化 志 国 家 册 未 中 国 弹 平 卫 心 开 
: 春田 双 亚 持 ”2018-11-14 


时 间 : 2018-03-05 


(a) 我 的 收藏 列表 (b) 浏览 收藏 的 新 邮 


图 12-31 浏览 已 收藏 新 闻 的 效果 


清除 临时 数据 

最 后 裔 要 消除 或 注释 挥 一 开始 为 了 测试 样式 录入 的 临时 数据 ， 以 人 免 影 | 

这 里 需要 消 际 的 数据 如 下 。 

。 首页 (index.js): data 中 的 临时 新 闻 列 表 数 据 newsList。 

e 潭 于 页 〈detailjs): data 中 的 临时 新 闻 数 据 article。 

e。 个 人 中 心 页 (myjs): data 中 的 临时 收藏 夹 新 闻 数 据 newsList、| 
及 临时 头像 路 和 任 地 址 src。 


时 


痢 春生 和 WE hat 到， 


俄罗斯 联邦 驻 华 大 使 赤 尼 京 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 予 


pa la 


{HY 第 12 章 综合 设计 应 用 实例 一 


重量 看 二 章 WWE hiat 过 


< 


俄罗斯 联邦 驻 华 大 使 杰 尼 率 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 巴 


本 网 讯 【 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 司 
赤 尼 索 去 在 北京 俄罗斯 驻 华 大 使 忱 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 先 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 达尔 ， 大 使 助理 、 塔 斯 
社 记者 ， 我 校 校 办 主任 兽 上 声明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 弄 
去 院士 奖 获得 者 中国 俄罗斯 文学 研究 会 会 长 刘 议 
飞 教授 等 参加 了 会 见 。 


时 间 : 2018-03-05 


(c) 取消 收藏 新 


我 的 收藏 (2) 


装 “ 俊 所 斯 刁 指 六 要 大 使 床 尼 率 去 会 内 简 党 
雪 韦 记 鹏 家 山 一 行 并 堵 受 《 力 辐 译文 全 
等} 联 子 一 一 2018-03-05 


下 = 各 以 池子 代表 国家 队 获 中 国 纹 纪 球 公开 
> 讲 团 亚 亚 至 一 一 2018-11-14 


商 £1 


(e) 个 人 中 心 已 登录 


大 重量 : 生 二 WE hat 后， 


未 登录 ， 点 此 登录 


傅 人 


(d) 个 人 中 心 未 登录 


吉日 硬 间 者 WE hat 二 


< 


俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 同 译文 全 集 》 赠 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
杰 尼 索 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译 艾 全 集 》 。 俄 罗斯 驻 华 大 使 馆 参赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芯 尔 ， 大 使 助理 、 塔 斯 
社 记 者 ， 我 校 模 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友谊 勋章 和 利 哈 乔 
去 院士 奖 获 得 者 、 中国 俄 罗斯 艾 学 研究 会 会 长 刘 广 
飞 教授 等 参加 了 会 见 ， 

时 间 : 2018-03-05 


Cf) 浏览 收藏 的 新 闻 


12-32 《〈 续 ) 


:| 中 微 信 小 程序 开发 零 基础 入 门 


二 "navigationBarTitleText”™: "我 的 新 闻 了 网 "， 
10. "navigationBarTextSstyle" : "white™ 

1 $s 

1l12. "tabBar™: 1 

和 "COlLor" :> "#000"™", 

14. "selectedColor™.: "#328eeb", 

15. 0 

16. { 

了 "pagePath": "pages/index/index", 
18. "iconPath": "images/index.png", 

下 人 "selectedIConPath": "images/index blue.png”, 
a wi =P i = 

2 } ， 

Rs 

有 "pagePath": "pages/my/my", 

24. "IconPath": "images/my.png"™, 

2 "selectedIconPath": "images/my blue.png", 
2 text 

2 } 

28. ] 

2 

3 


app-wxss 文件 的 完 翁 代 公 如 下 : 


1 . /* 新 闻 列 表 区 域 样式 */ 

2. /*2-1 新 闻 列 表 容 器 */ 

3. #news—list f{ 

4. min—height: 600rpx; 
: Padding: lorpxs 

Gs | 

7. Vs*2-2 列表 项 目 */ 

8. -1 1sS 七 一 七 em{ 

二 displav: Tlexs 

lV0. flex—-direction: row; 
11.。 border-bottom: lrpx solid gray? 
A 


} 
13./*2-3 新 闻 图 片 */ 
14..1ist—item imagelt 
1l5. width:230rpx; 
16. helghhts 150rnX? 
li margin: lO0rpx; 
183 .4 
19./*2-4 新 闻 标 题 */ 


30 newe— titieli 


i = 


一] 记忆 


机 


HY 第 12 章 综合 设计 应 用 实例 一 


<image src="{{item.src}}" class="slide-image"™" /> 
</swiper—-item> 
</block> 
</swiper> 
<!1-- 新 闻 列 表 --> 
<View lid='news——l1ist"'> 
<view Class="1ist -item’' wx:for="| {newsList}}™” wx:forDm 
wix: key="{[ {news.1d}}"> 
<image src='{{news.poster}}'></image> 
<text class="news-title" bindtap="goToDetail" dataid: 
Of{{news.title}}——{{news.add date}} 
</text> 
</view> 
</view> 


WXSS (pages/index/index.wxss) 完整 代码 如 下 : 


/*swiper 区 域 样式 */ 
/sl1-1 swiper 组 件 */ 
SWIiper 
height: 400rpx; 
} 
/*#*1-2 swiper 中 的 图 厂 *#/ 
SwWiper jmage 1 
width: 100%» 
height: 100%; 


- } 


JS (pages/index/index.js) 完整 代码 如 下 : 


var Common=require('../../utils/common.js") // 引 用 公共 Js 文件 
Page (1 
data: 1 
// 纠 灯 片 这 材 
SWliperImg: | 
{ src: "http://www.ahnu.edu.cn/uploads/20180305/2018030513073€ 
{ src: http://www.ahnu.edu.cn/uploads/20181114/20181114090202 
{ src: "http://www.ahnu.edu.cn/uploads/20181127/201811270613]15 
| 
上 7 
goToDetail: functLonm( 全) 1 
/7 获取 携 市 的 data-id 数据 
let id=e.currentTarget.dataset.1id,; 


/ /携带 新 闻 id 进行 页 面 跳 转 


于 区 微 信 小 程序 开发 零 基础 入 门 


1 
2 
3 
4. 
= 
6 
了 
8 
中 


10. 


于 


\D 


斑 广 己 记 
WN PO. 


el ds sl ls da a le a I le 
人 


./* “点 击 收藏 ”按钮 */ 


-buttont 


<View Class='container" wx:if="'{{article.1i1d}}'> 
vow Clasos="title >TIarticle. titlell=/ vicew> 
<VliewW Class="'poster'> 
<image src='{{article.poster}}'" mode='widthFix'></image: 
</view> 
<Vview Class='content'>{{article.content}}</view> 
二 VIEW class='add date"'> 轩 间 : {{article.adqd date}}</view> 
<button wx:if="{{isAdd}}" plain bindtap~='"cancelFavorites'>”Y 
<button wx:else plain bindtap='addFavorites'>¥ 单 击 收藏 < /bu 
</view> 


WXSS (pages/detail/detail.wxss) 完整 代码 如 下 : 


/* 整 体 容 絮 */ 
-Containert 
padding: lorpx; 
text—align: center; 


-} 


} 
/* 新 闻 标 题 */ 
ey | 
Tont~—size: 14pty 
lJ]ine—height: 80rpx; 
. /* 新 闻 图 片 */ 


- .POSTer imagel 


width: 100%-; 


. /+ 新 闻 正 文 */ 


.- .ConNntenti1 


teaxt—align: lefktr 
font—size: l2pty 
Tine heighi: 60rpnxs 


= 
. /*#+ 新 闻 日 期 */ 
- -add datel 


font—size: lpts 
text—align: I1ghts 
line—-height: 30rpx; 
margin right: 25IDX; 
margin—top: 20rpx; 


width: 220rpxs; 


和 a | 
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10. cancelFavorites: function() 1 


二 下 let articlLe=this-qata-article: // 多 取 当 前 新 闻 
3 WX.removeStorageSsSvync (article.id);} // 从 本 地 比 存 删除 
13. this.setData({ isAdd: false 1}); / /更 新 按钮 显示 
14. |}, 

1l5. onLoad: functionl(options) 1 

I let id=options.id; /7 获取 页 面 跳 转 来 时 携 市 | 
有 let result=common .getNewsDetalil (id) 

ia / /获取 到 新 闻 内 容 

二 号 1 (result.code=="200") 1| 

+ - this.setData({ article: result.news 上) 

2 } 

2 

3 // 栓 得 当前 新 闻 十 人 否 在 收藏 严 中 

24. Var article~=wx .getStorageSync (id); 

35 // 己 存在 

26. iE art1iede C= "| 

wo this.setDatal({ isAdd: true }) 

28. } 

2 / /不 和 仔 在 

志恒- else 1 

3 this.setData({ isAdd: false 1}) 

3 } 

3 

34. 上) 


3) 个 人 中 心 页 (my) 代码 展示 
WXML (pages/my/my.wxml) 完整 代码 如 下 : 


<!-- 登 录 面板 --> 
<View id='myLogin'> 
<block wx:1if="{{isLogin}}'> 
<image id='myIcon'" src='{{src}}'></image> 
<text id='nickName'>{{nickName}}</text> 
< blLOck> 
<button wx:else open—type="'getUserlinfo" bindgetuserinto=" 
9. </button> 
10.</view> 
1 < 一 我 的 收藏 一 > 
12 .过 yl1eWw lid="myFavorites'> 
13. <text> 我 的 收藏 ({ {num}})</text> 
14. <!--- 收 藏 的 新 闻 列 表 --> 


15,. <wiew lid="news— list"'» 


人 


可 微 信 小 程序 开发 零 基础 入 门 


习 height: 400rpx; 
displavyv: Tlexs 

6. flex—direction: column; 
$F lign—items: centers 

8 Justify—content: space—around; 
y= 

10./*1-1 头像 图 片 *7 
11.#myIcont 

下 之 Width: 2Z00rpxs 

13. height: 200rpx; 

14. border—radius: 30%; 


} 
16./*1-2 微 信 昵称 *y/ 
17- 间 nickKkName1{ 
18. color: white; 


} 
20./#* 我 的 收藏 */ 
21.#myFavoritest 
22. Padding: 20rpx: 
WS 


JS (pages/my/my.js) 完整 代码 如 下 : 


1. Page l(t 

二 二 data: I 

3 num: 0 

}, 

5.  /V/ 获 取 微 信用 户 信 息 

6. getMylnfo: function(e) 1 

Fs let info=e.detail.userintfo; 

this.setDatal(t 

号 isLogin: true, / /确认 登录 状态 
10: src: info.avatarUrl, / /里 新 图 片 来 源 
Ln nickName: info.nickName // 更 新 昵称 

| }) 

1 3 / /获取 收藏 列表 

14. this.getMyFavorites (}; 

L353 

16. // 获 取 收 藏 列表 

li. gqetMyFavorites: function()}) { 

18. let info=wx.getStorageInfoSync () ; // 恋 取 本 地 缓存 信息 
有 let keys=info.keys,; // 锋 取 全 部 key 信息 
20. let num=keys .length; // 著 取 收 藏 新 闻 数 量 


人 Py 5 se i 


第 12 章 “综合 设计 应 用 实例 一 


38. rll- "adetalilrdeEail2ids=" 二 19 


公共 JS 文件 代码 展示 
JS (pages/utils/common.js) 完整 代码 如 下 : 


/ /模拟 新 闻 数 据 


COnNnst news = | 
了 可 : 2 
title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 案 夫 会 见 校 沉 委 书 记 顾 家 山 一 行 并 接受 《 力 | 
poster: i ge et 
content: ”本 了 网 讯 〈《 校 出 版 社 ) 3 月 2 日 上 午 ， 俄罗斯 驻 华 大 使 杰 尼 索 3 
A 见 了 校 党 委 书 记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 的 十 僚 《 力 
斯 驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 仿 一 秘 伊 戈 尔 、 大 使 助理 、 塔 斯 社 记者 ， 我 校 书 
版 社 社 长 张 奇 才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友 请 勋章 和 利 哈 乔 夫 院士 炎 获 得 者 、 十 
会 会 长 刘 文 飞 教授 等 参加 了 会 见 。 '， 


nS 


n> da dates "ZOT3 3 D053 

8. }, 

3. { 

10. id: “304083", 

I title: ' 我 校 和 学 于 代表 国家 队 获 中 国 羽毛 球 公开 客 男 双 亚 军 '， 

1 2 poster: 'http://www.ahnu.edu.cn/uploads/20181114/201811140930 


3 content: ， 本 网 讯 〈 体 育 学 院 徐 梦 涛 ) 11 月 11 日 ， 世 界 羽 联 中 国 羽 手 
下 帷幕 。 在 为 子 双打 六 决赛 中 ， 我 校 2018 级 运动 训 练 专 业 学 生 潭 强 5 搭档 何 济 十 以 
艳 哈 末 。 阿 山 / 享 德 拉 ， 普 级 决赛 。 决 赛 中 ， 这 对 年 轻 组 合 以 1 : 2 人 负 于 现世 界 排名 全 
得 了 本 次 比赛 的 亚 苗 。 这 也 是 谭 强 在 本 年 度 内 获得 的 最 好 成 绩 。 ，'， 


14. ld dalte: 2Z018 11= 4 

1>- 上 

| 

到 二 

18 . title: "我 校 学 隆 在 全 省 第 八 届 少 数 民族 传统 体育 运动 会 上 喜 获 佳绩 '， 
19. poster: 'http://www.ahnu.edu.cn/uploads/20181127/20181127061 


2 content: "本 网 讯 〈 体 育 学 院 邹 华 刚 ) 11 月 18 日 至 23 日 ， 由 安徽 省 , 
委 、 省 体育 局 和 蚌 埋 市 人 民政 府 姑 办 的 安徽 省 第 八 届 少 数 民 族 传统 体育 运动 会 在 蚌 其 
16 个 地 市 代表 团 近 1300 名 运动 员 、 教 练 员 、 裁 判 员 参加 了 本 次 运动 会 。\n 本 届 运 z 
式 摔 跤 、 建 球 、 跃 球 、 押 加 、 高 脚 竞 速 、 陀 螺 和 板鞋 竞 速 8 个 项 目 。 我 校 组 建 了 由 用 
强 等 23 名 少数 民族 学 生 组 成 的 运动 员 队 伍 ， 代 表 芜 湖 市 参加 了 高 脚 竞 速 、 武 术 、 跨 二 
5 个 大 项 的 比赛 。 经 过 油 烈 和 角逐， 我 校 运 动 健儿 共 获 得 4 个 一 等 奖 (第 1 名 )，6 个 二 : 
9 个 二 等 奖 (第 5 一 8 名 ) 的 优异 战绩 ， 出 色 地 完成 了 比赛 任务 。 ，'， 

i add Gale 901g 11 271" 


mY A 了 


外。 微 信 小 程序 开发 零 基 础 入 门 起 y 


39. /7 获取 新 闻 内 容 


40 .function getNewsDetail (newSID) 1{ 


41. let msg = { 

42 . code: "404'，// 没 有 对 应 的 新 闻 

4 3 . news: {1} 

A440 Fs 

45. for (var 1 三 Dr 二 < Tews. length; 于 于 十 { 
46. ifE (newsID == news[il]-.idy) ( // 匹 配 新 闻 ia 编 气 
47. msg.code = "200'; // 成 功 

48 msg.news = news[i]; // 更 新 当前 新 闻 内 容 
49. break; 

J } 

3 

52. return msg; // 迟 回 但 找 结果 

53.]} 

D4. 

ee 了 二 

56. * 对 外 暴露 接口 

ST 

J8.module.exports = { 

39. getNewsList: getNewsList, 

6U. getNewsDetail: getNewsDetail 

G1 


0 l 


通过 新 闻 小 程序 项 目的 开 尽 练习 主要 复习 了 以 下 知识 点 和 操作 : 


小 程序 项 目的 创建 步骤 ; 

手动 新 建 小 程序 应 用 文件 和 页 面 文件 的 步骤 ; 
导航 栏 标 题 、 背 景 闫 色 和 文字 闫 色 的 设置 方法 ; 
tabBar 的 创建 方法 ; 

页 面 布局 和 样式 设计 的 基本 方法 ; 

使 用 双 化 括号 {个 } 生 成 动态 数据 的 方法 ; 

使 用 setData0 车 萤 动 态 数 据 的 方法 ; 
wx:for、wx:1f 和 wx:else 属性 的 用 法 ; 
公共 图 数 的 创建 、 寻 出 和 调用 方法 ; 

本 地 缓存 数据 的 读 取 和 删除 ; 


个 人 开 友 者 服务 类 目 


一 级 分 类 


快递 业 与 邮政 


教育 


出 行 与 交通 


生活 服务 


餐饮 


二 级 分 类 


邮政 

教育 信息 服务 
特殊 人 群 教育 
发 幼儿 教育 
在 线 教育 
教育 装备 
代 轨 

学 务 


生活 缴 寓 


ea 
汇 | 浸 


Ti 


摄影 /扩印 
婚庆 服务 
点 评 与 推荐 


餐厅 排队 
旅游 攻略 
出 境 Wi-Fi 


环保 回收 /废品 回收 
摄 凡 入 印 
婚庆 服务 
点 评 5 推 荐 
排队 
旅游 攻略 


nl a 


三 经 
寄 件 / 
查 件 


于 了 微 信 小 程序 开发 零 基础 入 门 yo 


一 级 分 类 三 雹 
ji, 
法 律 服务 让 Ry 
商业 服务 会 展 服务 / 
一 般 财 务 服务 / 
农林 牧 渔 
体育 培训 / 
Wi 在 线 健身 


注意 : 面向 个 人 开发 者 开放 的 服务 类 目 会 随 着 相关 政策 、 法 律 法 规 
化 而 变化 ， 请 开发 者 以 提交 时 开放 的 类 目 为 准 ， 本 文档 仅 供 参考 。 


小 程序 场景 什 


场景 值 ID 说 明 
发 现 栏 小 程序 主 入 口 ，“ 最 近 使 用 ”列表 从 基础 库 2.2.4 版 本 起 将 
”| 列表 ) 


1005 顶部 搜索 框 的 搜索 结果 页 

1006 发 现 栏 小 程序 主 入 口 搜索 框 的 搜索 结果 页 
1007 单 人 聊天 会 话 中 的 小 程序 消息 卡片 
1008 群 聊 会 话 中 的 小 程序 消息 卡片 
1011 扫 拉 二 维 但 

1012 长 按 图 片 识 询 二 维 码 

1013 手机 相册 选取 二 维 码 

1014 小 程序 模板 消 显 

1017 前 往 体 验 版 的 入 口 页 

1019 微 信 和 钱包 

1020 公众 号 profile 页 相关 小 程序 列表 
1022 聊天 顶部 置顶 小 程序 入 口 

1023 安 时 系统 蝎 面 图 标 

1024 小 程序 profile 页 

1025 扫描 一 维 码 

1026 附近 小 程序 列表 

1027 顶部 搜索 框 的 搜索 结果 页 的 “使 用 过 的 小 程序 ”列表 
1028 我 的 卡 包 

1029 卡 券 评 情 页 

1030 在 目 动 化 测试 下 打开 小 程序 

1031 长 按 图 片 识别 一 维 人 码 

1032 手机 相册 选取 一 维 码 


下 微 信 小 程序 开发 零 基础 入 门 


场景 值 ID 说 明 
1048 长 按 图 片 识别 小 程序 码 
1049 手机 相册 选取 小 程序 码 
1052 卡其 的 适用 门店 列表 
1053 搜 一 搜 的 结果 页 
1054 顶部 搜索 框 小 程序 快捷 入 口 
1056 音乐 播放 占 沫 单 
1057 钱包 中 的 银行 卡 详情 页 
1058 公众 号 浆 章 
1059 体验 版 小 程序 绑 定 邀请 页 
1064 微 信和 连 Wi-Fi 状态 栏 
1067 公 炊 号 文章 三 告 
1068 附近 小 程序 列表 广告 
1069 移动 应 用 
1071 钱包 中 的 银行 卡 列 表 页 
1072 二 维 人 码 收 蒜 页 面 
1073 客服 消息 列表 下 发 的 小 程序 消息 卡片 
1074 公众 号 会 话 下 发 的 小 程序 消 恩 卡片 
1077 播 周 边 
1078 连 Wi-Fi 成 功 页 
1079 微 信 游戏 中 心 
1081 客服 消 四 下 发 的 文字 链 
1082 公众 号 会 话 下 发 的 文字 链 
1084 朋友 圈 广 告 原 生 页 
1089 微 信 聊天 主 界 面 下 拉 ，“ 最 近 使 用 ” 栏 ( 从 基础 库 2.2.4 版 本 起 将 包 侣 
1090 长 按 小 程序 右上 角 菜 单 唤 出 最 近 使 用 历史 
1091 公众 号 文章 商品 卡片 
1092 城市 服务 入 口 
1095 小 程序 广告 组 件 
1096 聊天 记录 
1097 微 信 支 付 签 约 页 
1099 页 和 面 内 机 插 件 
1102 公众 写 profile 页 服务 预 宛 
1103 发 现 栏 小 程序 主 入 口 ，“ 我 的 小 程序 ”列表 (从 基础 库 2.2.4 版 本 起 有 


ot, Fs TT s,s EH 一 一 一 一 有 Fe -Fi = ar 7 


小 程序 预定 颜色 


小 程序 目前 的 预定 颜色 有 148 个 ， 颜 色 名 称 大 小 写 不 敏感 。 


Chartreuse #7f{1ff00 93. 148. 160 
Chocolate #d2691e 127. 255,0 
Coral #1{f71S0 255, 127, 80 
CornflowerBlue #6495ed 100, 149. 237 
Cornsilk #fff8dc 255, 248, 220 
Crimson #dcl43c 220.20.60 
Cyan #001fff 0. 255., 255 
DarkBlue #00008b 0. 0. 139 


颜色 和 名称 RGB 十 六 进 制 RGB 十 进 制 
AliceBlue 240, 248, 255 
AntiqueWhite 250, 235, 215 
Aqua 0, 255, 255 
Aquamarine I, 255, 213 
Azure 240, 255, 255 
Belge 240. 255, 255 
Bisque 245, 245, 220 
Black 255. 228. 196 
BlanchedAlmond 0.0.0 
Blue 255, 235, 205 
BlueViolet 0, 0. 255 
Brown 138, 43, 226 
BurlyWood 165, 42. 42 
CadetBlue 222, 184, 135 

to 
az6gle 
0 
#6495ed 
#8de 
del3c | 
oo 
#00008bp 


于 站 一 微 信 小 程序 开发 零 基础 入 门 


颜色 和 名称 


DarkSeaGreen 
DarkSlateBlue 
DarkSlateGrey 
DarkTlurquoise 
DarkViolet 
DeepPmk 
DeepSkyBlue 
DimGray 
DodgerBlue 
FireBrick 
Floral White 
ForestGreen 
Fuchsia 
Gainsboro 
GhostWhite 
Gold 
GoldenRod 
Gray 

Grey 

Green 
GreenYellow 
HoneyDew 
HotPink 
IndianRed 
Indigo 

Ivory 

Khaki 
Lavender 
LavenderBlush 
LawnGreen 
LemonChuffon 
LightBlue 
LightCoral 


站 站 > 尊 


| 
| 


RGB 十 进 制 
143. 188, 143 
12,61, 139 
47.79.79 

0. 206, 209 
148. 0., 211 
255, 20, 147 
0 191, 233 
1053, 105, 10> 
30. 144. 235 
178. 34. 34 
233, 230, 240 
34. 139. 34 

了 了 33 0..233 
220. 220, 220 
248. 248, 2535 
3 215 0 
218, 165, 32 
128, 128, 128 
128., 128, 128 
0. 128,0 

1 73. 233, 41 
240. 233, 240 
2535, 103, 180 
205% 22 .92 
3. 0 130 
253, 23535, 240 
240. 230, 140 
230. 230, 230 
233, 240, 243 
i24232.00 
253, 230. 205 
173,216, 230 
240. 128, 128 


附录 C 


颜色 名 称 RGB 十 进 制 
LimeGreen 50. 205. 50 
Linen 250. 240. 230 
Magenta 255. 0. 255 
Maroon 128. 0.0 
MediumAquaMarine 102. 205. 170 
MediumBlue 0. 0. 205 
MediumOrchid 186, 85, 211 
MediumPurple 147, 112, 219 
MediumSeaGreen 60. 179. 113 
MediumSlateBlue 123, 104. 238 
MediumSpringGreen 0. 250. 154 
MediumTurquoise 72. 209, 204 
MediumVioletRed 199. 21, 133 
MidnightBlue 1 
MintCream 245, 255, 250 
MistyRose 5 
Moccasin 255, 228. 181 
NavajoWhite 5 
Navy 0. 0. 128 
OldLace 253, 245, 230 
Olive 128. 128. 0 
OliveDrab 107. 142. 35 
Orange 255, 165. 0 
OrangeRed 255, 69, 0 
Orchid S112 214 
PaleGoldenRod 238, 232, 170 
PaleGreen 152, 251, 152 
PaleTurquoise 173, 238 238 
PaleVioletRed 219. 112. 147 
PapayaWhip 255, 239. 213 
PeachPuff 255, 218, 185 
Peru 205, 133, 63 

#0 


Pink #{ttcOcb 255, 192. 203 


颜色 名 称 


Sienna 
Silver 
SkyBlue 
SlateBlue 
SlateGray 
SDNOW 
SpringGreen 
SteelBlue 
Tan 

Teal 

Thistle 
Tomato 
Turquolse 
Wlolet 
Wheat 
White 
WhiteSsmoke 
Yellow 


YellowGreen 


注意 : RebeccaPurple 是 CSS Level4 中 的 一 种 新 颜色 ， 是 Web Comm 


于 7 微 信 小 程序 开发 零 基础 入 门 


RGB 十 六 进 制 
#a0522d 
#cQc0c0 
#87ceeb 
#6aSacd 
#708090 
#fffafa 
#00ff7f 
#4682b4 
#d2b48c 
#008080 
#d8bfd8 
#1{f6347 
#40e0d0 
#ee82ee 
#fSdeb3 


#1SfST1S 


#9acd32 


opis 


RGB 十 进 制 
160. 82., 45 
192, 192., 192 
133, 206, 233 
106. 90, 203 
112. 128, 144 
2353, 250, 250 
2355 121 
70, 130, 180 
210. 180, 140 
0. 128, 128 
216, 191,216 
en 7 
64. 224. 208 
238. 130, 238 
245 222, 1719 
2 了 与 了 二 
243. 243, 245 
2 
134., 203, 30 


队友 Eric 去 世 的 女儿 Rebecca 命名 的 ， 以 此 来 支持 他 ， 


图 书 和 资源 文 桂 


富生 


人 


感谢 您 一 直 以 来 对 清华 版 图 书 的 文 持 和 爱护 。 为 了 配合 : 
提供 配套 的 资源 ,有 需求 的 读者 请 扫 接 下 方 的 “ 书 圈 "做 信 公 1 


书 专区 下 载 ,也 可 以 拨打 电话 或 发 送 电子 邮件 咨询 。 
如 果 您 在 使 用 本 书 的 过 程 中 遇 到 了 什么 问题 ,或 者 有 相 ; 


也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 


人 


Cg i | 


我 们 的 联系 万 式 : 


,J 十 训 海 深 区 双 洁 吃 学 人 研 大 硅 A 座 707 


圳 


